浏览器页面字体

大多数时间，我们希望网页字体是受到我们控制的页面字体，但是问题在于，我们的网页上的字体往往并不是所有的用户电脑上都有安装对应的字体。

例如最近几年常见的 苹方黑体 ，很多电脑是没有安装对应的字体的。

字体类型

• Sans-serif 无衬线字体
  无衬线字体意味着字体在边角不会有很多装饰性的边边角角的装饰

• Serif 衬线字体
  衬线字体则意味着字体在笔画开始和结束的时候会有一些装饰

  
  字体对比.jpg
• Monospaced 等宽字体
  等宽字体意味着每一个字符宽度都一致，最著名的就是 courier new，因为字体宽度一致，所以特别容易对齐，比较适合编码用。
• Fantasy字体
  梦幻字体，我在这翻译为艺术字，往往不切实际，用的不多，艺术作品可能用的比较多。
• Script 字体
  手写体，大部分为欧美地区用到，

字体列表

网络安全字体

几乎在所有常用的操作系统上都有安装的字体，（windows、Mac、linux、Android、iOS等等）

网络安全字体要感谢来自于微软90年代和21世纪初的倡议 core fonts for the web

字体名称	字体类型	注意
Arial	sans-serif	通常认为最佳做法还是添加 Helvetica 作为 Arial 的首选替代品，尽管它们的字体面几乎相同，但 Helvetica 被认为具有更好的形状，即使Arial更广泛地可用。
Courier	New monospace	某些操作系统有一个 Courier New 字体的替代（可能较旧的）版本叫Courier。使用Courier New作为Courier的首选替代方案，被认为是最佳做法。
Georgia	serif
Times New Roman	serif	某些操作系统有一个 Times New Roman 字体的替代（可能较旧的）版本叫 Times。使用Times作为Times New Roman的首选替代方案，被认为是最佳做法。
Trebuchet MS	sans-serif	您应该小心使用这种字体——它在移动操作系统上并不广泛。
Verdana	sans-serif

注意，cssfontstack.com 维护了一个windows mac操作系统中使用的网页安全字体的列表，可以有助于你对于字体的决策。

字体栈

你可以看到即使是最常用的网络安全字体，也不能够保证100%的系统都能够识别，我们往往可以使用字体栈来代替。
字体栈其实就是你在font-family里面提供一个逗号分离的字体

p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

这样子，会在首个字体不存在的情况下，以此读取后面的字体，倒是一个蛮不错的办法，

注意！

上述的字体在依次顺序是变化为非衬线字体了，这对于显示效果并不好，所以如果要使用字体栈，就一定要保证显示效果是相似的。而不是在字体栈里面列出来显示效果相差甚远的几套字体。

web字体

上述的字体栈只是简单的找到了替换的方式，但是如果出现了很多电脑都没有的字体，我们也可以通过浏览器来下载我们所需要的字体。

@font-face {
        font-family:"myFont";
        src:url('./css/myFont.ttf')
}

随后你就可以把你@font-face 中声明的字体引入到你想要的地方。

注意！

• 浏览器支持不同的字体格式，因此您需要多种字体格式以获得良好的跨浏览器支持。
  例如,
  • 大多数现代浏览器都支持WOFF / WOFF2(Web Open Font Format versions 1 and 2，Web开放字体格式版本1和2)，它是最有效的格式，
  • 但是旧版本IE只支持EOT (Embedded Open Type，嵌入式开放类型)的字体,
  • 你可能需要包括一个SVG版本的字体支持旧版本的iPhone和Android浏览器。我们将向您展示如何生成所需的代码。
• 字体一般都不能自由使用 ，您必须为他们付费，或者遵循其他许可条件，比如在代码中(或者在您的站点上)提供字体创建者。你不应该在没有适当的授权的情况下偷窃字体。

寻找你需要的字体

通常有以下几种方式来寻找字体

• 免费的字体经销商：这是一个可以下载免费字体的网站(可能还有一些许可条件，比如对字体创建者的信赖)。比如： Font Squirre，dafont 和 Everything Fonts。
• 收费的字体经销商：这是一个收费则字体可用的网站，例如fonts.com或myfonts.com。您也可以直接从字体铸造厂中购买字体，例如Linotype，Monotype 或 Exljbris。
• 在线字体服务：这是一个存储和为你提供字体的网站，它使整个过程更容易。更多细节见Using an online font service。

当然你也可以寻找万能的 github.com