关于字体的那些事（二）

上文我们了解了同一个字体为什么在自己的app和网页端展示不同的一些原因，本文我们继续了解为什么同样的字体，在不同浏览器会展示不同的效果。关于字体渲染，其实本质是一个多方因素影响的结果，如果详细解析还是比较复杂的，这里我推荐给大家一个文章"网站字体渲染，聊聊各浏览器下字体排版不一致的问题"，感兴趣可以自行了解一下。本文会主要解释浏览器渲染字体的一些基本原理。
在做文件渲染时，我们经常会好奇，浏览器到底都支持那些字体？
首先，浏览器支持什么字体取决于用户系统里都安装了什么字体，比如，当我们使用如下CSS时：

1. font-family: "微软雅黑","黑体","宋体"；

复制代码

那么浏览器会尝试按照从左到右的顺序依次应用，假设用户设置了微软雅黑字体，但是电脑上并没安装，那么就用黑体。此时，有的开发人员就会纳闷，这个世界上这么多字体，我怎么保证用户电脑上有我期望的字体呢（这其实也是分享文件时，为什么更喜欢用PDF形式的原因之一）？美工给的效果满足用户预期，在开发笔记本上也可以完美展示，但到了领导或甲方电脑上就一团糟，这不得被骂死。而关于此问题，有以下解决方案
1. 使用CSS设置备用字体
接触过前端开发的同学，在设置字体时，可能会经常碰到一下几个单词，“serif”、“sans-serif”、“cursive”、“fantasy”、“monospace”。这其实代表得是5类字体，并不是5个字体。例如Serif表示字体成比例、且上下有小横线（例如Times New Roman），那么符合这个特征的字体都可以算为Serif，而具体采用了那个字体，是浏览器根据用户电脑上安装了哪种字体采用一个默认的，各浏览器可能都不相同。几乎所有普通字体都可以落入这5种字体类中。这样可以一定程度上解决一部分字体缺失时，显示不一致问题。但始终是无法保证，不同客户端渲染的字体都是完全一致的。
因此更不能说我们把浏览器展示的字体和导出PDF中的字体去对比，因为有可能网页中展示的字体并不是实际设置的字体样式，两者完全没有可比性。
2. 服务器下载字体
如果最终用户要求苛刻，必须不同浏览器展示相同，且必须使用实际设置的字体。对于这种情况，CSS也提供了对应的支撑，我们可以使用font-face让用户的浏览器从服务器上下载字体。

1. @font-face {
   
2.     font-family: 美轮美奂的字体;
   
3.     src:url('字体文件1.woff'),  
   
4.     url('字体文件2.ttf'),
   
5.     url('字体文件3.eot');
   
6. }

复制代码

为什么还需要设置好几个URL指向多个字体文件，只能说还是为了兼容性，怕有的字体在当前操作系统重中不支持。
3. 文字转图片
我们可以将想要的文字做成文字图片，但这样做的缺陷也是十分明显的，例如不利于网页SEO，不方便修改等等。

综上所述，字体渲染一致性本身就受多方因素印象，无论使用什么产品，都很难去保证各平台浏览器完全一致性，大家主要是了解原理，尽力去避免不一致问题即可。至少做到用到的字体都是保证一定是已安装的正确字体。