非前端也要知道的网页知识 - 特殊字体

写这个的原因：我任职过几家公司，总是会遇到设计师全站的设计稿会用到平方，思源，冬青黑体等等字体，设计稿确实还挺好看，但是，我该怎么按照设计稿把网页还原呢？相信很多写过页面的人都有这个苦恼，那么，我们该怎么才能让设计师明白，他们设计的字体在网页上不好实现呢？

首先，我们很多网站是面向国内的用户开发的，国内用户绝大部分是用windows（简称W）系统，W系统是不带平方字体的，所有，W系统想模仿Mac（简称M）系统字体的办法就是引入跟M系统一样的字体包，现实吗？显然是不现实的，后面我们来说明具体原因。

这篇文章是针对PC端的，移动端字体会有不同，不能一概而论。有些地方可能措辞不当，但我尽量表述清晰。

网页的字体显示主要方法是读取该电脑安装的字体，因为大部分用户没有安装特殊字体，就算设置了，用户的电脑还是显示不了。这也是目前绝大部分的网站都是用微软雅黑，没有用特殊的字体的原因；网页的字体设置最小为12px；

疑问：

我想用特殊字体，有解决办法吗？

有。

一、特殊字体可以切图在网页上展示。

二、英文字体，可以引入特殊字体包。因为英文只有26个字母，字体包一般都不大，网页加载快，渲染速度快，基本不会影响用户的网页加载效果。

三、中文字体，如果是固定几个字或者说少量字，可以引入字体包。推荐一个字体包生成网站：https://www.youziku.com（不是广告），这个网站可以针对固定的字生成字体包，可以说很方便了；如果是大量字体，不建议用字体包，因为会严重影响网页是加载速度，所以建议使用浏览器的自带字体。

为什么我们的网页不能使用全中文的整个字体包呢？我们举个栗子：

一个中文字体包的大小是10M，如果一个人家里网络不是很好，下载这个字体包需要30s，那么30s之前，网页会显示系统默认的字体渲染，网页会一直转圈圈加载字体，30s下载完成之后网页才会被渲染成设置好的字体，这样一个网站的体验你能接受吗？是的，基本没有人能接受。所以中文字体的大量引入目前还是网页的一道槛，但是，我相信未来肯定会有解决这个苦恼广大设计师的问题的办法的。

有人提到Google Web Fonts，目前没有翻墙的用户连Google都连不上，更别提用Google字体库了。