字体样式设置

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

移动端的小字体问题

字体大小的适配原则

  1. 对于移动端，直接用px就好
  2. 如果需要适配大屏幕，就搭配媒体查询。
  3. 特别是在多端开发的时候，字体不要用rem一刀切，媒体查询是现在表现比较好的方案。

10px的字体的问题

  1. 背景知识：移动端为了保证阅读，是不会支持太小的字体的，这就是为什么绝大多数手机浏览器最小只支持12px的字体的原因
  2. Chrome浏览器以前提供了-webkit-text-size-adjust:none;尽管如此，移动端的浏览器也是不认这一套的，后来这个特性被滥用，Chrome后续版本就不再支持了。
  3. Chrome简体中文版和英文版不一样！英文版可以显示10px的字体，但是中文版的chrome——最小限制就是12px，还是会很贴心的帮你调整大小。开发者如果没有注意这一点，就会对不同的Chrome下的差异感到困惑。

  4. 利用scale的解决方案：

    1
    2
    3
    4
    5
    6
    .setSize {
      font-size: 10px;
      transform: scale(0.7);
      -webkit-transform: scale(0.7);
      display: inline-block;
    }

  5. 用这种方法需要注意的是：

    1. scale对行内元素无效，所以必须变成块元素
    2. 有一个隐藏的坑，这些inline-block的元素之间出现奇怪的空白（因为英文里是使用空格字符来分割的）
    3. 如果不想要这个空白，有几个解决方法：
      1. 这些行间块标签之间（指HTML代码里）不要换行，而是连着写，比如<span>1</span><span>2</span>
      2. 父容器设置font-size: 0
      3. 不使用inline-block，而用float属性
    4. scale虽然缩小了视觉大小，但是实际占据的空间还在那里，有必要的话，通过margin来修正
    5. 如果限制字体大小只是为了布局和换行，可以考虑通过flex布局来智能换行，规避小字体，使用12px。参考本Blog另一篇《文本节点的样式》里“结合flex布局进行设置”小节

@font-size

  1. 中文字体一般都很少自己准备，因为看的过去的中文字体一般都挺大的，特别如果在移动端上。但是反正5G时代要来了是吧。

  2. 语法规则：

    1
    2
    3
    4
    5
    6
    @font-face {
      font-family: <YourWebFontName>;
      src: <source> [<format>][,<source> [<format>]]*; // 可以是相对路径也可以是绝路径，
      [font-weight: <weight>];
      [font-style: <style>];
    }

  3. 其中format指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等。不同的浏览器对字体格式支持是不一致的。(简单说，IE.eot;其它浏览器.woff；手机浏览器.ttf;)。

  4. 为了使@font-face达到更多的浏览器支持，Paul Irish写了一个独特的font-face语法叫Bulletproof @font-face:

    1
    2
    3
    4
    5
    @font-face {
      font-family: 'YourWebFontName';
      src: url('YourWebFontName.eot?') format('eot');/*IE*/
      src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/
    }

  5. 更多的浏览器支持：

    1
    2
    3
    4
    5
    6
    7
    8
    @font-face {
      font-family: 'YourWebFontName';
      src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
      src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
                  url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
                  url('YourWebFontName.ttf')  format('truetype'), /* Safari, Android, iOS */
                  url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
    }

icomoon的使用

其他类似的网站使用起来也差不多，比如iconfont。

icomoon网站的使用方法

  1. 打开icomoon网站，如果不需要在网站上保存信息，就没必要注册
  2. 点击右上角IcoMoon App
  3. 点击右上角Project图标，进入项目列表
  4. 通过Import Project将本地icomoon文件夹中的selection.json导入
  5. 进入对应的项目（就是刚才导入的项目），通过右边的小菜单可以给图标组命名等
  6. 通过左键点击来选择或者取消其中的图标
  7. 如果有自定义的svg图标，比如设计从sketch导出了，那么选择Import Icons导入新增的svg，并选中
  8. 注意到屏幕下面有3个选项卡，当前处于选择的选项卡，进入屏幕下方右侧的Generate Font（不用左边的，因为图很大啊）
  9. 可以为添加的svg设置名字，e开头的是字体的编号，也就是将来content的内容
  10. 点击下方选项卡里的Download，可以获得一个.zip文件夹

icomoon导出的svg font的使用方法

  1. 解压文件，将文件夹放入项目
  2. 通过解压出的文件夹里的demo.html可以查看每个图标对应的content

  3. 一般就在文件里style.css设置字体

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    /* style.css */
    @font-face {
      font-family: 'icomoon';
      src:  url('fonts/icomoon.eot?r5pkoa');
      src:  url('fonts/icomoon.eot?r5pkoa#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?r5pkoa') format('truetype'),
        url('fonts/icomoon.woff?r5pkoa') format('woff'),
        url('fonts/icomoon.svg?r5pkoa#icomoon') format('svg');
      font-weight: normal;
      font-style: normal;
    }

  4. 然后写CSS类选择器，然后添加属性content，和其他所有对字体产生影响的样式都有效果。注意font-size的设置。需要应用到元素上的时候，给元素添加这些类就可以了

    1
    2
    3
    4
    5
    6
    7
    8
    9
    /* style.css */
    /* 定义类选择器对应的svg */
    .icon-bank-card:before {
      content: "\e90a";
      color: red;
    }
    .icon-my-order:before {
      content: "\e90b";
    }

  5. 一般而言，我们会对上面写好的类，做一些公共的样式设置（说白了就是罗列这些类名，逗号分割，然后统一设置如下），比如：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    /* style.css */
    /* 对他们做一些公共样式的设置 */
    .icon-bank-card:before,
    .icon-my-order:before,
    {
      /* use !important to prevent issues with browser extensions that change fonts */
      font-family: 'icomoon' !important;
      display: inline-block;
      speak: none;
      font-style: normal;
      font-weight: normal;
      font-variant: normal;
      text-transform: none;
      line-height: 1;
      /* Better Font Rendering =========== */
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

  6. 然后把style.css引入到项目里。（项目中用啥都没关系，比如scss，@import './../icomoon/style';）

进阶：更加合理的CSS写法

上面的写法其实会让人感觉很辛苦（定义一遍，还要再罗列注入一次通用属性），高端一点的做法是利用HTML 5的data-*和attr()来简化配置，比如,约定在写HTML代码的时候，使用属性data-icon（当然也可以换其他的名字）来直接注入icon，上面那些就可以简洁的写成这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
[data-icon]:before {
  content: attr(data-icon);
  /* 通用样式 */
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  display: inline-block;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
1
2
<!-- 用起来大概就是这样 -->
<i data-icon="\e90a">

至于颜色等特殊化处理，就应该分离，用别的CSS选择器去控制。