图片来源于网络

系统自带的字体包括：

中笔墨体：微软雅黑、宋体、黑体；英笔墨体：Arial、Helvetica

利用这些字体自带的字体可以高度的还原设计稿上的笔墨效果。

html调用特殊字体我们一路来进修下网页中特别字体的引用 PHP

我们在网站制作过程中，因页面设计所需，常常会碰到一些分外的字体，虽然引用了，却无法在网页中显示和设计稿一样的字体。
这是由于用户的电脑并没有安装这些分外字体。

这种情形下，我们可以通过以下方法让其正常显示。

切成图片的办法

优点：大略、快捷、方便 缺陷：不易变动（须要会ps）、放大缩小会失落真、不利用优化适用于不常更新的区域，如首页的标题、固定的栏目标题等。
如下图“联系”两字

图片来源于网络

外部字体引用的办法

优点：方便后期用户操作，直接变动笔墨即可、利于优化缺陷：中笔墨体较大，会影响加载速率。
如下图数字

图片来源于网络

利用方法：

1）下载所需的字体样式，格式有所差异，常用.TTF、.woff、.OTF等格式

可通过在线字体转换，将字体格式转化为我们须要的格式。

字体格式转换一：

https://www.fontsquirrel.com/tools/webfont-generator

字体格式转换二：

https://www.fontke.com/tool/convfont/

2）css中引用字体格式：

@font-face { font-family: '字体名称'; src: url('../fonts/字体名称.eot'); src: url('../fonts/字体名称.eot?#iefix') format('embedded-opentype'), url('../fonts/字体名称.woff2') format('woff2'), url('../fonts/字体名称.woff') format('woff'), url('../fonts/字体名称.svg#字体名称') format('svg'); font-weight: normal; font-style: normal; }

3）引用：

.num { font-family: 字体名称；}

由于中笔墨体体积较大，预览下载须要一定的韶光，打开会比较慢，英笔墨体体积本身比较小，不存在这样的问题。