网页字体那些事儿

相比英文字体，中文字体的网页开发有着极大的局限性。因为，一套中文字体最少也要有几千个字符，体积为几个MB；单单为了浏览网页，开发者不可能让用户去下载字体，只能依靠操作系统的预装字体。（*注：确实有网站提供中文字体的web服务，从技术角度，我不推荐这样做。）

不同的操作系统、不同的版本预装不同的字体（因为版权），几乎没有交集。因此，大多数开发者索性忽略中文字体，让操作系统自行渲染，或者用图片呈现字体效果。

下面是目前中文字体的最佳实践，主要参考了Kendra Schaefer的文章。

一、操作系统的预装字体

操作系统决定了开发者可以使用的字体。所以，第一步，我们必须了解操作系统到底提供哪些字体。

Windows操作系统：

  • 黑体：SimHei
  • 宋体：SimSun
  • 新宋体：NSimSun
  • 仿宋：FangSong
  • 楷体：KaiTi
  • 仿宋GB2312：FangSongGB2312
  • 楷体GB2312：KaiTiGB2312
  • 微软雅黑：Microsoft YaHei （Windows 7开始提供）

OS X操作系统：

  • 冬青黑体: Hiragino Sans GB （SNOW LEOPARD开始提供）
  • 华文细黑：STHeiti Light （又名STXihei）
  • 华文黑体：STHeiti
  • 华文楷体：STKaiti
  • 华文宋体：STSong
  • 华文仿宋：STFangsong

如果用户装了MicroSoft Office，还会多出一些字体。

  • 隶书：LiSu
  • 幼圆：YouYuan
  • 华文细黑：STXihei
  • 华文楷体：STKaiti
  • 华文宋体：STSong
  • 华文中宋：STZhongsong
  • 华文仿宋：STFangsong
  • 方正舒体：FZShuTi
  • 方正姚体：FZYaoti
  • 华文彩云：STCaiyun
  • 华文琥珀：STHupo
  • 华文隶书：STLiti
  • 华文行楷：STXingkai
  • 华文新魏：STXinwei

二、font-family命令

CSS的font-family命令，指定了网页元素所使用的字体。下面是一个例子。


font-family: Georgia, "Times New Roman", 
             "Microsoft YaHei", "微软雅黑", 
             STXihei, "华文细黑", 
             serif;

它的规则有三条。

（1）优先使用排在前面的字体。

（2）如果找不到该种字体，或者该种字体不包括所要渲染的文字，则使用下一种字体。

（3）如果所列出的字体，都无法满足需要，则让操作系统自行决定使用哪种字体。

根据这些规则，font-family应该优先指定英文字体，然后再指定中文字体。否则，中文字体所包含的英文字母，会取代英文字体，这往往很丑陋。

上面图片中，红框内的英文字母，左边采用英文字体渲染，右边采用中文字体渲染，哪一种效果比较好，一目了然。

为了保证兼容性，中文字体的中文名称和英文名称，应该都写入font-family。比如，"微软雅黑"的英文名称是Microsoft YaHei。

此外，中文字体的中文名称，以及由多个单词组成的英文名称，应该放在双引号内。

三、 Windows平台和Mac平台

由于Windows和Mac的中文字体没有交叉，所以应该同时为两个平台指定字体。

常见的做法是，Windows平台指定"微软雅黑"（Microsoft YaHei），Mac平台指定"华文细黑"（STXihei）。

四、衬线体和无衬线体

所谓"衬线体"（Serif），指的是笔画的末端带有衬线的字体。

就像英文字体一样，中文字体也可以分成"衬线体"和"无衬线体"（San-serif）。比如，对于繁体字来说，微软正黑（Microsoft JhengHei）是无衬线体，新细明体（PMingLiU）是衬线体。

对于简体字来说，微软雅黑（Microsoft yahei）是无衬线体，宋体（SimSun）是衬线体。

一般来说，衬线体装饰性强，往往用于标题；无衬线体清晰度好，往往用于正文。

五、几种常见中文字体

（1）宋体（SimSun）

宋体是最常见的中文字体，如果没有指定字体，操作系统往往选择它来渲染。很多人认为，这种字体并不美观。

（2）微软雅黑（Microsoft YaHei）

微软雅黑的美观度和清晰度都较好，可以作为网页的首选字体。它在Mac平台的对应字体是华文细黑（STXihei）。

但是，Windows XP没有预装这种字体，这时可以选择黑体（Simhei）替代。不过，黑体比较粗，不应用于字号较小的文字。

（3）仿宋（FangSong）

这种字体是衬线体，比宋体的装饰性更强。如果字号太小，会影响清晰度，所以只有在字号大于14px的情况下，才可以考虑这种字体。

它在Mac平台的对应字体是"华文仿宋"（STFangsong）。

（4）楷体（KaiTi）

楷体也是衬线体，装饰性与仿宋体接近，但是宽度更大，笔画更清楚一些。这种字体也不应该在小于14px的情况下使用。

它在Mac平台的对应字体是"华文楷体"（STKaiti）。

六、Webfont在线字体引用

一套精美的字体库，它的体积高达好几MB甚至更高，即便压缩过后，它依然不小。
这时，繁衍了两种解决方案，开发者通过制作精简版字体（繁琐，修改麻烦，效率低下且容易出错）或使用字体云服务（压缩与转码字体），来解决字体库体积过大问题。

就在外部字体与预装字体都不是很好的解决方案时，webfont出现了。
它的出现使得用户不安装网页指定的字体也可以获得同样的显示效果成为可能！

webfont，即网页字体技术，它是一种不需要安装字体文件即可实现在网页中使用并渲染出来的一种技术，它的应用可以很好的运行，不仅解决了字体问题，webfont对搜索引擎更加友好，对SEO优化也有很大的帮助。
目前，大部分网站已经使用了webfont技术，其他网站正在逐步使用webfont技术。

因为webfont技术已经比较成熟了，使用起来也不是那么复杂，侧面来说，加之以5G网络技术的逐渐成熟，5G的普及离我们越来越近了。为什么中文webfont没有被广大中文网站所使用？不就是由于网速还不够快，加载渲染几兆字体的webfont比较吃力吗？为什么现在的中文webfont使用时要进行字符压缩，生成小字库？不就是为了提升网页字体加载渲染的速度，使网页能够完美的被访问吗？因此，在5G普及之后，webfont成为网站标配是必然。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用外部(本地)字体</title>
<style>
 
/* 引入webfont在线字体 */
@font-face{
  font-family:'webfont';
  src: url('https://code.z01.com/font/ZoomlaXingtiJ6.eot?#iefix'); /* IE9 */
  src: url('https://code.z01.com/font/ZoomlaXingtiJ6.eot?#iefix') format("embedded-opentype"), /* IE6-IE8 */
  url('https://code.z01.com/font/ZoomlaXingtiJ6.woff') format("woff"), /* chrome、firefox */
  url('https://code.z01.com/font/ZoomlaXingtiJ6.ttf') format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+ */
  url('https://code.z01.com/font/ZoomlaXingtiJ6.svg#ZoomlaXingtiJ6') format("svg"); /* iOS 4.1- */
}
 
#demo{
   font-family:webfont !important;
   font-size:30px;
   font-style: normal;
   font-weight: normal;
 }
</style>
</head>
<body>
<p id="demo">我是测试字体!</p>
<p>我是测试字体!</p>
</body>
</html>

　　

 

总结分析：

注意事项：
（1）要格外注意，webfont技术的文件格式，同样存在浏览器兼容问题。
（2）webfont技术支持的常见文件格式有：EOT、TTF/OTF、WOFF、WOFF2、SVG等
（3）使用webfont字体，一定要注意字体的知识产权问题。
（2）webfont是一种字体图标，它有很多优势。相对图片的话，webfont它支持复制、查找、工具翻译、无障碍访问、朗读等。

最后，webfont使用起来同样存在很多问题，如果浏览器未加载完webfont，那字体将怎样被渲染出来？庞大的体及怎么办？

（完）

参考

http://www.liushuishiyin.com/n/1381.html

posted @   帽子戏法  阅读(680)  评论(0)  编辑  收藏  举报
相关博文：
· JS动态加载引入JS文件
· PHP替代语法
· 帮你克服web字体选择焦虑症
· 各大网站CSS常用font-family
· 前端中字体的使用
阅读排行：
· Manus重磅发布：全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后，我竟然真的恢复了删除的微信聊天记录！
· 没有Manus邀请码？试试免邀请码的MGX或者开源的OpenManus吧
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
全部 html css js Linux php MySQL seo web git other 联系 管理
点击右上角即可分享
微信分享提示