Font

css

这里只总结css相关属性用法中css手册上说明的不清楚的，简单的自行查阅便可。

font-family

字体族，字体库好像顺口些。font-family属性由一系列字体库名称和通用字体库名称组成，即:

font-family：family-name | generic-family

1
font-family: Times New Roman,"open-sans","幼圆",sans-serif

  • 字体库名称
    浏览器会按照font-family属性后所述的字体库名称列表依次检测本地电脑是否安装安装或者@font-face中是否有该字体，如果第一个字体库Times New Roman本地电脑有，则按第一字体库显示字体，没有则检测下一个字体库名称，如果字体名称包含空格或中文，则应使用引号括起。

  • 通用字体库名称
    如果都没有呢？所以通常在属性列表中至少添加一个通用字体库名称，避免当列表中所有字体库本地电脑中都没安装时，不同的系统的计算机采用自己默认的字体库显示导致不一致。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    generic-family: cursive  fantasy monospace  serif sans-serif
    serif:衬线，类似于汉字的笔锋，字体笔画的末尾都来那么一笔加深或者说装饰一下笔画的末端。
    sans-serif：无衬线，即均匀的笔画，和serif对应。
    monospace：等宽字体，
    fantasy： 虚幻体？
    cursive：草书
    我他么是实在看不出serif和monospace字体的区别...草书好看

字体图

@font-face

服务器端字体，即可以指定在线的字体，或者说加载服务端的字体，使页面不被限制在本机的字体范围。

1
2
3
4
5
6
7
@font-face {
  font-family: 'Julius Sans One';
  font-style: normal;
  font-weight: 400;
  src: local('Julius Sans One'), local('JuliusSansOne-Regular'), url(http://fonts.gstatic.com/JuPCQ.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

  • src

    指定远程（url() format(“”),）字体文件地址，或者本地（local(“Font Name”)）用户的地址,可以多写几个，知道某一个可以加载为止。

  • unicode-range
    字符集，即在指定的字符集上应用该字体库，如果没有该字符集，则不会加载字体库
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
     @font-face {
                font-family: 'mixFont';
                src: url('xxx.ttf');
                unicode-range: U+4E00-9FCB;/*汉字的字符集*/
    } 
    当对元素应用该字体库时，只有汉字部分（即指定字符集）被应用为指定的字体样式。如果没有汉字，则该部分不会被加载，
    这样可以在缩小需要加载的范围，避免部分情况的加载，可以节省带宽。
    值值可以分三种：
        unicode-range: U+26;     /* 单一的 */
        unicode-range: U+0025-00FF;          /* 范围 */
        unicode-range: U+4??;                /* 通配符，即 U+400 ~ U+4FF*/
        可以混合写，之间用逗号隔开

推荐：
字体