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

最新推荐文章于 2024-09-26 19:20:29 发布

162100

最新推荐文章于 2024-09-26 19:20:29 发布

阅读量1.6k

点赞数 1

分类专栏： CSS 文章标签： css 前端 html

本文链接：https://blog.csdn.net/best_inh/article/details/122174705

版权

本文介绍了如何使用CSS实现英文和数字显示为斜体，同时保持中文汉字正常显示。通过@font-face引用英文字体的italic版本，并避免使用font-style: italic;以防止影响中文。在解决浏览器兼容性问题时，如IE不支持.ttf，需要转换为.eot、.woff、.svg格式。最后提供了实现该效果的网页链接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

在网上检索到一款：

测试后发现手机浏览器不行，都变斜体了，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，找到了几款要么不灵要么收费；最后找到了这个：