专栏首页李洋博客CSS样式中汉字和字母分别使用不同字体的方法

CSS样式中汉字和字母分别使用不同字体的方法

说来也巧最近不知道发点什么文章,在后台测试代码的时候看见网友在文章“修改网页自定义字体的CSS代码+图文教程”反馈,怎么在css里汉字和字母使用不同的字体,应该怎么判断和实现,这个问题问得好,文章有内容了,哈哈哈,因为没使用过中英文分开设置字体,所以我也得先去补习一下,搜索了下关键字,其实跟上篇文章也差不多,只是多个一个写法,使用 font-family 的调用方法,根据font-family的原则,假如客户终端不认识前面的字体,就自动切换到第二种字体,第二种不认识就切换到第三种,以此类推。假如都不能识别就调用默认字体,代码示例如下:

font-family:Arial,'Times New Roman','Microsoft YaHei',SimHei;   
font:bold 12px/0.75em Arial,'Times New Roman','Microsoft YaHei',SimHei;

我们可以为英文、中文等两种字体调用不同的字体来渲染。如:Arial,'Times New Roman'这两种字体不认识中文,只认识英文,所以这两种字体只能渲染英文数字和一些特殊符号,而页面中的中文就会自动调用第三种字体Microsoft YaHei(PS:假如存在这种字体的话)。

所以在定义字体的时候把英文的字体写在前面把中文的写在后面。这样,系统就会自动按顺序依次给字用字体,如果当前字体不支持文本,自动换用列表中的下一个字体。

我们来看一看 CSS 中字体的 Fallback 机制:

就这样一直找匹配的字体,直到系统默认,所以一般都把系统默认的5类字体放到 font-family 定义的最后来写,那么一个国际化的站点应该如何设置多语种的字体呢?其先后顺序如何设定?这里强烈推荐 Airbnb 作为参考。

[lang="ja"] body{
    font-family:"ヒラギノ角ゴ Pro","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"MS Pゴシック","MS PGothic","MS Gothic”,
    "MS ゴシック","Helvetica Neue”,Helvetica,Arial,
    sans-serif !important
}
[lang="ko"] body{
    font-family:"나눔 고딕","Nanum Gothic","맑은 고딕","Malgun Gothic”,
    "Apple Gothic","돋움",Dotum,"Helvetica Neue”,Helvetica,
    Arial,sans-serif !important
}
[lang^="zh"] body{
    font-family:"Hiragino Sans GB”,"华文细黑","STHeiti","微软雅黑",
    "Microsoft YaHei",SimHei,"Helvetica Neue”,Helvetica,Arial,
    sans-serif !important
}

很多开发者忽略了这一点:尽管我们在操作系统中常常看到宋体、微软雅黑、华文细黑这样的字体名称,但实际上这只是字体的显示名称,而不是字体文件的名称。虽然说在大多数情况下直接使用显示名称也有效,但有些用户却工作在一些很极端的情况下,这会导致你的字体声明无效。

比如说,用户安装了中文版的操作系统(这意味着系统有中文字体),但是却切换到了以英文为主要语言——这种情况在那些希望加强英语锻炼的中文用户当中是很常见的。这时候,操作系统很有可能无法按照显示名称找到正确的字体,所以我们要记住的第一件事情就是: 同时声明中文字体的字体名称(英文)和显示名称(中文),就像这样:

Font-family: SimSun, “宋体”
Font-family: “Microsoft YaHei”, “微软雅黑”
Font-family: STXihei, “华文细黑”, “Microsoft YaHei”, “微软雅黑”

永远不要忘记声明英文字体,并且英文字体应该在中文字体之前。

记住这个事实:绝大部分中文字体里包含英文字母(但是基本上都很丑),而英文字体里不包含中文字符。在网页里中/英文混排是很常见的,你绝对不会喜欢用中文字体显示英文的效果,所以一定不要忘了先声明英文字体:

Font-family: Georgia, SimSun, “宋体”
Font-family: Arial, “Microsoft YaHei”, “微软雅黑”

作为一个 web 开发者,你理应对 Windows, Mac OS, Linux 家族等常用操作系统里的系统字体有足够的了解,特别是中文。在这里,我们假设目标网站要同时给予 windows 用户和 mac 用户最好的字体体验,于是我们可以这样声明:

Font-family: Helvetica, Tahoma, Arial, STXihei, “华文细黑”, “Microsoft YaHei”, “微软雅黑”, sans-serif

这句声明都做到哪些事情呢?让我们一一说明(括号内代表其对应的目标操作系统):

1、对于英文字符,首先查找Helvetica(Mac),然后查找Tahoma(Win),都找不到就用Arial(Mac&Win);若是以上三者都缺失,则使用当前默认的sans-serif字体(操作系统或浏览器指定);

2、对于中文字体,我们已经了解其规则了。华文细黑(Mac),微软雅黑(Win)是这两个平台的默认中文字体

注意向下兼容:

到此为止,我们的字体声明已经很不错了——如果你不必考虑还在使用旧版本操作系统的用户的话。遗憾的是,中文市场还有大量的用户在使用 Windows XP,宋体才是他们的主要中文字体。为了照顾到这些用户,你可以为微软雅黑增加一个 fallback:

font-family: Helvetica, Tahoma, Arial, STXihei, “华文细黑”, Heiti, “黑体”, “Microsoft YaHei”, “微软雅黑”, SimSun, “宋体”, sans-serif

同样地,你看到我们也为 Mac 系统使用了黑体作为 fallback。

好了代码搬运完成,从测试结果来看(没有苹果的本子,只测试了windows)可以区别中英文字体了,其中IE9、IE9兼容模式(兼容IE8)、Chrome浏览器最新版本号、 Firefox浏览器最新版本号支持该font-family属性。可是某些版本号的IE浏览器(IE7、IE8)无法实现该font-family属性的要求。还会暴露出一些奇怪的 bug,如在这些版本号的浏览器下使用中文字体(比方微软雅黑),要把该中文字体放到font-family属性的首位,可是会导致英文字体也会使用该中文字体渲染。即在这些浏览器(IE7、IE8)下不支持在font-family属性中为英文和中文字体分别使用不同的字体,所以我最终还是选择不区别,毕竟折腾来回意义并不是很大,但是代码却多了很多。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Web前端开发规范手册

    为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档。

    用户7705674
  • 网站图标开发指南

    图标是网站中非常友好的附加物,许多网站都会使用各种图标来美化页面样式,给用户提供更好的指引。本文将会和大家一起学习页面图标的发展历史,以及最优的解决方案。

    疯狂的技术宅
  • 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family

    Sb_Coco
  • 「css基础」关于字体相关的基础知识(一)

    常言道网页设计的好坏,95%取决于字体的排版。尽管现在抖音、小视频和游戏的盛行,其占据了我们大部分的业余时间,但是还是有大部分人在网络上进行阅读,比如查阅资料,...

    前端达人
  • 「css基础」关于字体相关的基础知识(一)

    常言道网页设计的好坏,95%取决于字体的排版。尽管现在抖音、小视频和游戏的盛行,其占据了我们大部分的业余时间,但是还是有大部分人在网络上进行阅读,比如查阅资料,...

    前端达人
  • 设计师的春天:中文WebFont解决方案Font-Spider(字蛛) - 腾讯ISUX

    腾讯ISUX
  • HTML知识点整理

    小胖
  • 字符编码笔记:ASCII,Unicode和UTF-8

    很久很久以前,有一群人,他们决定用8个可以开合的晶体管来组合成不同的状态,以表示世界上的万物。他们看到8个开关状态是好的,于是他们把这称为"字节"。 再后来,...

    intsmaze-刘洋
  • (数据科学学习手札56)利用机器学习破解大众点评文字反爬

      爬取过大众点评的朋友应该会遇到这样的问题,在网页中看起来正常的文字,在其源代码中变成了下面这样:

    Feffery
  • 字符集和字符编码

    我们都知道在计算机内部,所有的数据在存储和运算的时候都应该使用二进制进行表示。例如字母,数字等等。通过二进制进行表示,我们可以指定很多规则来表示这些字符,为了避...

    用户7657330
  • 4.文本样式-CSS基础

    在前端开发中,对于外观控制一般用CSS来实现的,而不是用标签来实现,这更加符合结构和样式分离的原则,提高可读性和可维护性。

    见贤思齊
  • 做网站,乱码?应该选用什么编码?GB2312 ? UTF-8 ?

    ================================================起===============================...

    书童小二
  • 第178天:表单验证

    半指温柔乐
  • 各种编码格式,你懂得!!!

    GBK,ISO-8859-1,GB2312的本质区别 编码有几种 ,计算机最初是在美国等国家发明的 所以表示字符只有简单的几个字母只要对字母进行编码就好 我们标...

    李才哥
  • Unicode 和 UTF-8 有何区别?

    =============很久以前保存的,别人写的但是很明了=============

    谙忆
  • 小图标,大学问

    图标虽小,里面的门道可一点都不少。甚至可以说,图标的演化是 Web 技术演化的一个缩影。本文将带你回顾一下图标简史,了解一下图标技术的来龙去脉。

    ThoughtWorks
  • 关于常用的正则表达式的分享

      1.正则表达式,又称规则表达式。(英语:Regular Expression,在代码中常简写为regex、regexp或RE),计算机科学的一个概念。正则表...

    用户7053485
  • 关于Serif与Sans-Serif字体

    在西方国家罗马字母阵营中,字体分为两大种类:Sans Serif和 Serif,打字机体虽然也属于 Sans Serif,但由于是等宽字体,所以另外独立出 Mo...

    williamwong
  • UWP 手绘视频创作工具技术分享系列 - 文字的解析和绘制

    本篇作为技术分享系列的第二篇,详细讲一下文字的解析和绘制,这部分功能的研究和最终实现由团队共同完成,目前还在寻找更理想的实现方式。 首先看一下文字绘制在手绘视频...

    Shao Meng

扫码关注云+社区

领取腾讯云代金券