上文我们了解了同一个字体为什么在自己的app和网页端展示不同的一些原因，本文我们继续了解为什么同样的字体，在不同浏览器会展示不同的效果。关于字体渲染，其实本质是一个多方因素影响的结果，如果详细解析还是比较复杂的，这里我推荐给大家一个文章"网站字体渲染，聊聊各浏览器下字体排版不一致的问题"，感兴趣可以自行了解一下。本文会主要解释浏览器渲染字体的一些基本原理。
在做文件渲染时，我们经常会好奇，浏览器到底都支持那些字体？
首先，浏览器支持什么字体取决于用户系统里都安装了什么字体，比如，当我们使用如下CSS时：
- font-family: "微软雅黑","黑体","宋体"；
1. 使用CSS设置备用字体
接触过前端开发的同学，在设置字体时，可能会经常碰到一下几个单词，“serif”、“sans-serif”、“cursive”、“fantasy”、“monospace”。这其实代表得是5类字体，并不是5个字体。例如Serif表示字体成比例、且上下有小横线（例如Times New Roman），那么符合这个特征的字体都可以算为Serif，而具体采用了那个字体，是浏览器根据用户电脑上安装了哪种字体采用一个默认的，各浏览器可能都不相同。几乎所有普通字体都可以落入这5种字体类中。这样可以一定程度上解决一部分字体缺失时，显示不一致问题。但始终是无法保证，不同客户端渲染的字体都是完全一致的。
因此更不能说我们把浏览器展示的字体和导出PDF中的字体去对比，因为有可能网页中展示的字体并不是实际设置的字体样式，两者完全没有可比性。
2. 服务器下载字体
如果最终用户要求苛刻，必须不同浏览器展示相同，且必须使用实际设置的字体。对于这种情况，CSS也提供了对应的支撑，我们可以使用font-face让用户的浏览器从服务器上下载字体。
- @font-face {
- font-family: 美轮美奂的字体;
- src:url('字体文件1.woff'),
- url('字体文件2.ttf'),
- url('字体文件3.eot');
- }
3. 文字转图片
我们可以将想要的文字做成文字图片，但这样做的缺陷也是十分明显的，例如不利于网页SEO，不方便修改等等。
综上所述，字体渲染一致性本身就受多方因素印象，无论使用什么产品，都很难去保证各平台浏览器完全一致性，大家主要是了解原理，尽力去避免不一致问题即可。至少做到用到的字体都是保证一定是已安装的正确字体。
|
|
陕公网安备：61019002000258 |
隐私政策 |
网站地图