文章目录

1. 1. @font-face
2. 2. Browser Support
3. 3. 属性
   1. 3.1. Eg.
4. 4. Font Creator
   1. 4.1. 打开需要即将要使用的字体
   2. 4.2. 按 Ctrl+F 寻找需要的字体
   3. 4.3. 新建字体库，插入新字形
   4. 4.4. 复制需要的字体
   5. 4.5. 粘贴至新建的未映射的字形中
   6. 4.6. 右键原字体的字形属性查阅字码点
   7. 4.7. 右键新建的未映射字形字形属性填写字码点，并应用
   8. 4.8. 存储新建的字体库
5. 5. Font Squirrel
   1. 5.1. 上传字体，并设置转化参数
   2. 5.2. 下载
6. 6. 设置新建字体
7. 7. 显示效果
8. 8. 参考文章&链接

@font-face

为了实现网页的特殊字体效果，我们可以利用css3的@font-face属性

Browser Support

* Edge and IE: The font format only works when set to be “installable”.
* Firefox: Disabled by default, but can be enabled (need to set a flag to “true” to use WOFF2).

属性

属性	可能的值	说明
font-family	name	必需的。定义字体的名称。
src	URL	必需的。定义该字体下载的网址。
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	可选。定义该字体应该如何被拉长。默认值是”normal”。
font-style	normal italic oblique	可选。定义字体样式。默认值是”normal”。
font-weight	normal bold 100-900	可选。定义字体粗细。默认值是”normal”。
unicode-range	unicode-range	可选。定义该字体支持Unicode字符的范围。默认值是”ü+0-10 FFFF”。

Eg.

fontface(family, filename)
  @font-face
    font-family family 设置文本的字体名称
    font-weight normal
    font-style normal
    src url(font-url(filename + '.eot'))
    src url(font-url(filename + '.eot?#iefix')) format('embedded-opentype'),
    url(font-url(filename + '.svg#'+ family)) format('svg'),
    url(font-url(filename + '.woff')) format('woff'),
    url(font-url(filename + '.ttf')) format('truetype')

Font Creator

为了使字体文件不至于过大可以使用Font Creator创建自己的字体库

打开需要即将要使用的字体

按 Ctrl+F 寻找需要的字体

新建字体库，插入新字形

复制需要的字体

粘贴至新建的未映射的字形中

右键原字体的字形属性查阅字码点

右键新建的未映射字形字形属性填写字码点，并应用

存储新建的字体库

* 由于通过Font Creator新建的字体一般只有ttf与otf格式，我们需要使用Font Squirrel来生成其他对应格式

Font Squirrel

通过Font Squirrel将新生成的字体转化为其他格式

上传字体，并设置转化参数

下载

设置新建字体

font-custom-family = "wb-webfont"
font-custom-filename = wb-webfont
fontface(font-custom-family,font-custom-filename)

显示效果

参考文章&链接

w3schools.com
runoob.com
caniuse.com
使用 @font-face 个性化你网站的字体
Font Creator
Font Squirrel