Font

这里只总结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*/
    可以混合写,之间用逗号隔开

推荐:
字体