清澈的风

如何花式使用字体（一）

不管你是前端狗、设计师还是切图仔，你都绕不过搞字体这条路，虽然这条路并不是很难过，然鹅也是有一些注意事项的，请掏出小本，做好笔记：

普通地使用

人人都会的font-family

普通地引入

1
p{font-family:STKaiti;}/*华文楷体*/

此处有普通的注意：

在不同的系统中，预装的字体是不一样的，所以你在mac上引用Windows上的字体，是不会正常出现的。
以下是各系统的预装字体：

  • Windows操作系统

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

  • macOS X操作系统：

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

下面开始花式使用~撒花~(≧▽≦)/~啦啦啦

花式使用

花式第一招：同时引入多种字体

1
2
3
4
5
p{font-family: 
        Georgia, "Times New Roman", 
        "Microsoft YaHei", "微软雅黑", 
        STXihei, "华文细黑", 
        serif;}

花式注意：

  1. font-family的规则是：
    • 优先使用排在前面的字体。
    • 如果找不到该种字体，或者该种字体不包括所要渲染的文字，则使用下一种字体。
    • 如果所列出的字体，都无法满足需要，则让操作系统自行决定使用哪种字体。
  2. 根据以上规则，font-family应该优先指定英文字体，然后再指定中文字体。否则，中文字体所包含的英文字母，会取代英文字体，这往往会非常的吃藕（丑）。
  3. 为了保证兼容性，中文字体的中文名称和英文名称，应该都写入font-family。比如，”微软雅黑”的英文名称是Microsoft YaHei。
    此外，中文字体的中文名称，以及由多个单词组成的英文名称，应该放在双引号内。

上面的那堆简洁粗暴的总结一下就是：

想优先用哪个搞前面，英文字体搞前面
中英文名儿都搞上，汉字加引号，有空格加引号✧(≖ ◡ ≖✿)嘿嘿😏

花式小细节：
serif和San-serif分别代表衬线体和无衬线体

花式第二招：引入自己下载到本地的字体

哦嗬嗬嗬嗬~这里就要开始使用你们好多人都搞不懂的@font-face啦~然鹅并没有什么好怕的,跟着我做就可以了~

首先先去下载一个自己喜欢的字体，参考地址
中文字体
英文字体

然后下载字体文件到本地，一般字体文件的格式有.ttf .otf .woff eot和.svg,找到它们放在你的字体文件夹就可以了

例如我们的目录结构是

├── index.html
├── css
│ └── index.css
├── font
│ └── windy.ttf

index.html

1
2
3
4
5
6
7
8
<html>
<head>
<link rel="stylesheet" href="css/index.css">
</head>
  <body>
    <p>today is windy.</p>	
  </body>
</html>

index.css

1
2
3
4
5
6
7
8
9
10
/*要先引入fontface*/
@font-face{
	font-family:windy;/*windy可以自定义为任何名字*/
	src:url('../font/windy.ttf');
}
/*然后再用到你想用的地方*/
p{
	font-family:windy;/*用上刚才我们命名的windy*/
	font-size:16px;/*然后正常设置一些其他的就好啦*/
}

然后就阔以啦~

fontcss