By

文章目录
  1. 1. 引用文献

这是关于网页中中文字体的知识点摘要笔记。主要来源是中文字体网页开发指南。

相比英文字体，中文字体的网页开发有着极大的局限性。因为，一套中文字体最少也要有几千个字符，体积为几个MB；单单为了浏览网页，开发者不可能让用户去下载字体，只能依靠操作系统的预装字体。
不同的操作系统、不同的版本预装不同的字体（因为版权），几乎没有交集。因此，大多数开发者索性忽略中文字体，让操作系统自行渲染，或者用图片呈现字体效果。

  1. windows os:

    黑体：SimHei
    宋体：SimSun
    新宋体：NSimSun
    仿宋：FangSong
    楷体：KaiTi
    仿宋GB2312：FangSongGB2312
    楷体GB2312：KaiTiGB2312
    微软雅黑：Microsoft YaHei （Windows 7开始提供)

  2. os Xos

    冬青黑体: Hiragino Sans GB （SNOW LEOPARD开始提供）
    华文细黑：STHeiti Light （又名STXihei）
    华文黑体：STHeiti
    华文楷体：STKaiti
    华文宋体：STSong
    华文仿宋：STFangsong

  3. font-family 命令
    font-family: Georgia, “Times New Roman”,

    "Microsoft YaHei", "微软雅黑",
STXihei, "华文细黑",
serif;

    使用规则是：
    （1）优先使用排在前面的字体。
    （2）如果找不到该种字体，或者该种字体不包括所要渲染的文字，则使用下一种字体。
    （3）如果所列出的字体，都无法满足需要，则让操作系统自行决定使用哪种字体。
    根据这些规则，font-family应该优先指定英文字体，然后再指定中文字体。否则，中文字体所包含的英文字母，会取代英文字体，这往往很丑陋。

  4. 由于Windows和Mac的中文字体没有交叉，所以应该同时为两个平台指定字体。
    常见的做法是，Windows平台指定”微软雅黑”（Microsoft YaHei），Mac平台指定”华文细黑”（STXihei）。

一般来说，衬线体装饰性强，往往用于标题；无衬线体清晰度好，往往用于正文。对于简体字来说，微软雅黑（Microsoft yahei）是无衬线体，宋体（SimSun）是衬线体。
楷体也是衬线体，装饰性与仿宋体接近，但是宽度更大，笔画更清楚一些。这种字体也不应该在小于14px的情况下使用。

它在Mac平台的对应字体是”华文楷体”（STKaiti）。
仿宋也是衬线体，最好在字号大于14px的情况下使用，在mac平台对应的字体是”华文仿宋”(STFangsong)。

  1. @font-face命令
    若是不想在开发中只使用os支持的字体就要使用@font-face命令，格式如下：

    1
    2
    3
    4
    5
    6
     @font-face {
      font-family: <YourWebFontName>;
      src: <source> [<format>][,<source> [<format>]]*;
      [font-weight: <weight>];
      [font-style: <style>];
    }

    这里面涉及到format格式问题。
    (1). TureTpe(.ttf)格式： .ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；

    (2). OpenType(.otf)格式：otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；

    (3). Web Open Font Format(.woff)格式：.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；

    (4). Embedded Open Type(.eot)格式：.eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】；

    (5). SVG(.svg)格式：.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】
    这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持.

  2. 在在线字体网站中下载的特殊字体可能格式并不全，这需要用到第三方的工具来进行转换 fontsquirrel

  3. 在线字体网站
    (1)Dafont
    (2)nicewebtype
    (3)fonts
    (4)阿里图标库
    (5)typekit

引用文献

  1. 中文字体网页开发指南
  2. CSS3 @font-face
文章目录
  1. 1. 引用文献