CSS 全局实现英文数字斜体而中文汉字正常显示

天天都在看自己做的网页，某一天突然觉得好腻烦，感觉所有字体都是垂直竖立好单调。原本英文和数字不应该是倾斜一些的么？从小学写数字、中学写英文，都是斜着写呀。于是开整。

在网上检索到一款：

测试后发现手机浏览器不行，都变斜体了，PC浏览器尚可。

打开思路，如果我直接调用英文的斜体版本不就行了么（英文字体库一般都不大），而中文不动——而不要加：font-style: italic; 导致中文受连累。这样：

@font-face {font-family: "Hum777i";  /*字体名称*/src: url('Hum777i.ttf');  /*从控制面板字体里找的斜体英文，然后复制出来呵*/
}body { font-family: "Hum777i", "Microsoft YaHei", "SimSun"; }

OK！可以了！Chrome、Firefox、手机浏览器也行了，英文数字是好看的斜体、中文汉字端庄沉稳。

之后发现只有IE还不兼容，欠踹，经查是不认.ttf字体，需要.eot、.woff、.svg才行，于是又一顿折腾，在线找.ttf转.eot，找到了几款要么不灵要么收费；最后找到了这个：Font2Web - Your Online Font Converter Converting .ttf and .otf to .woff, .eot and.svghttps://www.font2web.com/在线转换网页字体，支持！，转换出完整的字体体系出来。

最终完稿：

@font-face {font-family:"Hum777i";   /*自定义字体名称*/src:url('Hum777i.eot'); /* IE9 Compat Modes */src:url('Hum777i.eot?#iefix') format("embedded-opentype"), /* IE6-IE8 */url('Hum777i.woff') format("woff"), /* Modern Browsers */url('Hum777i.ttf') format("trueType"), /* Safari, Android, iOS */url('Hum777i.svg') format("svg"), /* Legacy iOS */url('Hum777i.otf');
}body { font-family:"Hum777i", "Microsoft YaHei", "SimSun"; /*后面上两个是中文字体（雅黑和宋体）*/ }

总结：

1、@font-face 直接src英文字体的italic（斜体）版本，而不要加：font-style: italic; 才行，否则连累中文不兼容。

2、英文字体你可以到电脑中的字体中复制，也可以网上探索，英文字体库一般都不大，不影响浏览载入效率（可以加缓存处理），总之是你喜欢的最好，且要字体组合中的斜体版哟。

3、最后应用的网页：http://www.furuijinzhao.com/index_en.html（英文内容）、http://www.furuijinzhao.com/ （中英内容）

CSS 全局实现英文数字斜体而中文汉字正常显示相关推荐

java 数字转换成汉字_Java-String-阿拉伯数字转换成中文汉字数字
package com.test; public class NumberUtils { private static final String[] UNITS = { "", & ...
纯英文换行的css,利用CSS实现纯英文数字自动换行
下面为大家带来一篇CSS代码使纯英文数字自动换行的简单实现.内容挺不错的,现在就分享给大家,也给大家做个参考. 当一个定义了宽度的块状元素中填充的全部为纯英文或者纯数字的时候,在IE和FF中都会撑大容 ...
IDEA全局查找/搜索代码里所有中文/汉字或指定的中文/汉字
全局查找/搜索:快捷键 Ctrl+Shift+F,通过正则表达式找到所有中文/汉字: 正则表达式:[\u4e00-\u9fa5]
使用java将数字转化为中文汉字
在实际开发过程中,会有遇到需要将传入的数字参数转化为汉字用来展示的情况,这里给出自己的思考,供给大家参考. public static void convert(int number) {//数字对应 ...
php 判断英文数字,php 判断中文，英文，数字
$str='asb天水市12'; if (preg_match("/^[\x7f-\xff]+$/", $str)){ echo '全部是汉字'; }else { echo '不全 ...
如何在英文操作系统中支持中文汉字
以下操作需要系统安装盘的支持 1,首先解决网页上对中文字体的支持,也就是能够浏览中文网站这个一般较为简单,在IE的地址栏里,输入www.163.com ,然后会跳出对话框,提示要下载 Chinese ...
mysql拆分英文数字_MySQL中的REGEX仅显示由连字符分隔的数字。
让我们首先创建一个表-create table DemoTable ( Code varchar(100) ); 使用插入命令在表中插入一些记录-insert into DemoTable value ...
数字转换成中文汉字数字
1 class Student { 2 static String[] ss = new String[]{"零", "壹", "贰", & ...
QT5 / opencv / vs2013中文汉字无法显示（显示问号）
问题:如下,程序中的汉字无法正确显示. 解决方法:在文档开头加此行代码 #pragma execution_character_set("utf-8") //在要加中文的cpp或h ...

CSS 全局实现英文数字斜体而中文汉字正常显示

CSS 全局实现英文数字斜体而中文汉字正常显示相关推荐

最新文章

热门文章