移动端字体的设置

发表于 更新于
本文字数： 2.4k 阅读时长 ≈ 4 分钟

字体规则和安全字体

  1. 先说结论：不同于PC端字体设置的五花八门，移动端其实不太需要操心，iOS和Android都有自己的默认字体它们的显示区别并不大
  2. CssFontStack对安全字体的统计
  3. 苹果的官方网站上，也有iOS不同版本系统对字体的支持的文档。
  4. 安卓各家厂商都会有一些区别。
  5. 大多数时候，设计同事会负责制定规范或者给出方案。
  6. 通常我们都会给页面指定一套字体规则，浏览器会按照字体声明的顺序依次去寻找系统中已经安装的字体（优雅降级），找到了就渲染，如果都没有找到，就使用浏览器默认的字体
  7. 比如：font-family: Helvetica, STXihei, "Microsoft YaHei", Arial, SimSun,sans-serif;
  8. 一般都不会让页面的字体“裸奔”，我们至少需要设置一个安全字体，比如被大多数系统所默认支持的Arial

简单的统计

  1. 这可能会出乎很多新手的意料：大部分手机浏览器都不支持PC机上常用的、而且比较好看的微软雅黑，如果没有特殊需求，建议移动端的中文就使用系统默认的（英文和数字可以用Helvetica）
  2. Android特别建议就使用系统默认字体，因为你无法预知发行厂商会去内置什么字体，或者用户是否root了手机做了什么奇怪的配置
  3. 这么做在开发的时候可能看着很丑，不过没关系。
规则 默认中文 默认西文 其他中文 其他西文
Android Roboto/Droid Sans Fallback Roboto/Droid Sans 没有雅黑和宋体 Arial
iOS Heiti SC Helvetica Neue ST heiti无雅黑无宋体 Tahoma/Arial/Verdana/georgia

自定义字体

Web Font

  1. 现在基本上全平台都支持Web Font技术了，用CSS3提供的@font-face来设置吧，记得把字体文件放到服务器上或CDN上…
  2. 常用汉字都有3500个左右，用Web Font就会增加几M的流量，不过有特殊需求的时候也没办法反正5G时代要来了，喜欢搞事的设计纷纷露出笑容
  3. 页面抖动的问题：刚加载进来的时候是手机浏览器默认的字体，而整个字体文件（因为较大所以下载慢，但是CSS渲染不会阻塞页面渲染）下载下来后文字会被重新渲染，因此页面会出现抖动的现象反正5G是吧

  4. 字体预加载避免页面抖动：

    1. prefetch：使用HTML 5的资源预加载特性，目前只支持安卓，真机调试的时候，还需要用Fiddler之类的工具看是否有字体请求缓存，以判断当前手机浏览器是否支持prefetch

      1
      <link rel="prefetch" href="myFontName.ttf" />

    2. 提前使用@font-face：可以认为是一种黑魔法的策略，在真正需要字体的页面之前的页面，先用对用户隐藏的文字，使用Web Font策略，产生字体缓存。需要注意的是，最好是用position: absolute;定位将需要隐藏的文字放到可视区域之外去。——不要妄想使用display:none，没用；也不要使用visiable: hidden，它占地方，影响布局。

其他方案

  1. 常用汉字虽然有3500个左右，但还是可以考虑用一些工具，枚举有限的文字，删除不必要的，比如使用字蛛和有字库这样的工具，可以和设计商量下，应该都会。前者需要一些前端知识，后者则是可以在浏览器里操作。比如设计对数字有奇怪的偏好，完全可以生成只有数字的字体文件。
  2. 甚至也可以考虑把一些自定义的字体弄成图片，避免整个字体文件太大的问题

容易被忽略的版权问题

  1. 比如上面就提到：我们习以为常的“微软雅黑”，其实是购买Windows系统后附赠的！因此不但不允许将字体安装在服务器上，也不能使用@font-face的方式，其字体文件不能被修改或者作为软件一部分进行分发……这些都需要单独获得相应授权。换而言之，你只能font-family: 'microsoft yahei但是有没有效果就看你是不是在Windows系统里的浏览器打开页面了。
  2. 对于商业性网站，额外需要注意这个版权问题，不仅仅是@font-face，即使是使用的图片，就连图片上的文字也要小心。
  3. 有些字体会有免授权的，就很不错，允许非商业性的。
  4. 推荐一个站酷字体，这个有很多免费使用的字体，甚至允许商业使用

字体大小

rem

这个方法是不合理的。TODO:补充说明

根据dpr适配

  1. 当页面采用根据dpr缩放时的配套方案
  2. <meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5, minimum-scale=0.5,user-scalable=no">
  3. 这样主要是为了让dpr是2或者3的高清屏下，能完美还原2x/3x稿里1px的设计，但是这样缩放会让所有尺寸和字体都缩放，所以需要根据dpr来设置字体，比较合理的，是用rem做单位，然后根据dpr来设置根字体的大小。
  4. 手淘的flexible.js方案

  5. 默认写下dpr=1的时候的字体大小，然后根据不同的dpr下的值，去匹配不同的字体大小（例子里是使用选择器，在html的tag里，会有data-dpr这样的自定义attribute存在，以配合选择器生效）

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    /* dpr=1(默认) */
    div {
      font-size: 12px;
    }
    /* dpr=2 */
    [data-dpr="2"] div {
        font-size: 24px;
    }
    /* dpr=3 */
    [data-dpr="3"] div {
        font-size: 36px;
    }