有关字体的小小迷思

在前端工作中,大家都会时常需要注意到一些小小的细节的地方,虽然很小很容易忽略,但是却也直接到关系到用户体验的问题。 Q1: – 明明是微软雅黑,为什么在 MAC 下却变成了种丑丑的字体? Q2: – 为什么微软雅黑的字有时候看着怪怪的,大小不一样呢? Q3: – 为什么相同的页面在不同的系统不同的浏览器下看却是不一样的? Q4: – 字体渲染到底跟什么有关系? 为此,做了一个小 DEMO 以测试一下,分析下相同的页面在不同的 OS 和不同的浏览器下的表现差异。  一、编码与解码 Web 服务器返回的 HTTP 头中的 Content-Type: text/html; charset=“”的编码 与 html 中“ lang ”属性有关 网页本身 meta header 中的 charset 部分 浏览器菜单里一般允许用户强制指定编码 注:chrome55已经去掉默认编码选项,改为auto-detect。 二、选择字体 按照字体的描述方式来分: 点阵字体 矢量字体(轮廓字体) 矢量字的好处是字体可以无级缩放而不会产生变形。目前主流的矢量字体格式有3种:Type1,TrueType 和 OpenType。如下图中,前面有两个 T 的是 TrueType 的格式字体,O 开头的是 OpenType 的字体。 […]

© 2017 JDC. All Rights Reserved.