网页中字体的应用

引入

看到这样一句代码，发现是我以前没看到过的便搜索了一下，由此有了对字体应用更深入的认识。

1	body{font: 14px/26px 'Microsoft Yahei',STHeiti,sans-Serif;}

首先关于这句代码的含义解释：

body{
    font-size:14px;
    line-height:26px;
    font-family:'Microsoft Yahei',STHeiti,sans-Serif;
    }

更多的解释有CSS Font Shorthand Property Cheat Sheet
代码的理解就到这里了。接下来更多的是想备忘一下关于字体font-family 的相关设置。

web中文字体的应用

同时申明中文字体的名称（英文）和字体的显示名称（中文）

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

像这样：

font-family: SimSun, "宋体";

font-family: "Microsoft YaHei", "微软雅黑";

font-family: STXihei, "华文细黑", "Microsoft YaHei", "微软雅黑";

声明英文字体应该在中文字体之前,并充英文字体族的名称：非衬线和衬线

绝大部分中文字体里包含英文字母（但是基本上都很丑），而英文字体里不包含中文字符。
在网页里中/英文混排是很常见的，你绝对不会喜欢用中文字体显示英文的效果，所以一定不要忘了先声明英文字体
1
2
3
font-family: Georgia, SimSun, "宋体",serif;;

font-family: Arial, "Microsoft YaHei", "微软雅黑",sans-serif;

兼容不同的操作系统

华文细黑(Mac)，微软雅黑(Win)是这两个平台的默认中文字体，宋体（Windows XP）的主要使用中文字体。所以兼容性写法

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

首先查找Helvetica(Mac)，然后查找Tahoma(Win)，都找不到就用Arial(Mac&Win)；若是以上三者都缺失，则使用当前默认的sans-serif字体(操作系统或浏览器指定)；
在中文字体的用户群体里，很大一部分拥有 Mac 的人都同时安装了 Win 下常用的中文字体（这得归功于 Office for Mac）；但极少有 Win 用户去安装 Mac 下的中文字体。因此，把 Mac 用字体声明在前面几乎不会对 Win 用户产生什么影响
这里宋体和黑体都作为备用字体存在。

参考文章：Web 中文字体应用指南

移动中文字体的应用

三大手机系统的字体资料：

ios 系统
默认中文字体是Heiti SC
默认英文字体是Helvetica
默认数字字体是HelveticaNeue
无微软雅黑字体
android 系统
默认中文字体是Droidsansfallback
默认英文和数字字体是Droid Sans
无微软雅黑字体
winphone 系统
默认中文字体是Dengxian(方正等线体)
默认英文和数字字体是Segoe
无微软雅黑字体
1
2
/* 移动端定义字体的代码 */
body{font-family:Helvetica;}

使用系统默认的字体所达到的视觉效果跟使用微软雅黑字体没有明显的差别，所以

各个手机系统有自己的默认字体，且都不支持微软雅黑
如无特殊需求，手机端无需定义中文字体，使用系统默认
英文字体和数字字体可使用 Helvetica ，三种系统都支持

参考文章：移动web页面使用字体的思考