文章目录

字体类型及引用
压缩字体库文件
其他

前言：绝大多数情况下网页制作为了美观，会额外引用第三方字体。很久以前会把特殊字体切成图片，但后期维护成本太大了，小小改动都需要设计师进行修改，人工成本实在太大了，亦或是让设计师修改成“web-safe”的字体，这样子实现出来的效果往往不尽如人意。但是通过css3，我们可以额外加载第三方字体库解决这个问题。不过，由于web字体库体积比较大，会导致页面加载缓慢。因此在前端性能优化中，第三方字体加载成了不可忽视的一环。

字体类型及引用

总所周知，我们在css里引入需要的字体是这样子写，这里有开源的思源黑体为例：

<style>/*
* safari,chrome,opera,firefox支持ttf(true type font)和otf(open type font)
* ie9+ 仅支持.eot(embedded opentype)
* ie8及以下不支持@font-face规则
*/
@font-face{font-family: "SourceHanSansCN";src:url('SourceHanSansCN-ExtraLight.ttf') format('truetype'),url('SourceHanSansCN-ExtraLight.eot?#iefix') format('embedded-opentype');
}.special{font-family:"SourceHanSansCN";font-size:12px;color:red;
}</style>

但是一个小专题引用一整个web字体库也太夸张了，我们就想着能不能用到哪些字体就从字体库中抽取出来。

压缩字体库文件

字蛛这个工具为中文字体压缩提供了可能而且上手很容易。

前提先安装好node.js，我的node.js版本是8.2.1，安装成功后输入命令通过npm包安装font-spider

npm install font-spider -g

然后像上述的css中引入字体文件，注意，不能是less/sess哦，不然会用font-spider会识别不了，而且ttf文件必须存在

 src|--index.html|--css|     |--index.css|     |--SourceHanSansCN-ExtraLight.ttf

在项目的根目录下运行命令：

font-spider *.html

然后就可以生产一个压缩后的字体文件库了。

不过字蛛也会有限制，例如只能处理utf-8编码的文件，不能处理动态生成的字体。

其他

那么动态字怎么处理呢，如果通过异步加载字体是否可以解决我们上面由于字体库过大导致页面加载慢的问题，应该使用哪种合适的策略缓存字体呢？待续…

网页引用第三方字体总结相关推荐

【ttf 压缩】html网页引用中文字体，文件过大，加载缓慢的解决办法【字蛛】【web font】
[以下有部分内容引用的网络文章] 我们在日常需求中,经常会碰到视觉设计师对某个中文字体效果非常坚持的情况,因为页面是否高大上,字体选择是很重要的一个因素,选择合适的字体可以让页面更优雅.面对这种问题, ...
如何在Android引用第三方字体文件？
Mark~ 在一个应用中,我需要在所有的UI组件中使用客户提供的字体.这听起来似乎是个很稀松平常的任务,不是吗?是的,我当时也是这么想的.然后我震惊了,Android竟然没有提供一个简单优雅的方式来做 ...
小程序引用第三方字体（阿里巴巴普惠体）
1.第一种方式(推荐) 先直接上代码,后部分有解析 wxml <view>不破楼兰终不还(默认)</view> <view>数字:1234567890</vi ...
(LaTeX) Solved: 引用网页时出现的空格间距过大；网页链接的字体不符合要求
问题示例空格间距过大: 字体不符合要求: Solvement 在 .tex 文件中: % 设置网页引用 \usepackage{url} \urlstyle{rm} % 设置字体 % 解决因 url ...
网页设计师的字体替换方法指南
写在这篇文章之前:中文网页字体的窘境在国外的设计师幸福地讨论着如何不用图片进行字体替换时,当Google Proudly地提供越来越多的web fonts时,使用中文的网页设计师只能发出一声叹息.中 ...
html中css如何引用自定义字体 - 案例篇
html中css引用自定义字体,实现自定义字体样式效果(含案例) 网页中不同的字体,代码是怎么定义的?怎么引用外来字体文件? html 案例 · 代码如下: <!DOCTYPE html> ...
微信小程序加载第三方字体
1.加载本地字体做小程序项目时,有时为了提升页面展示效果,会引入一些第三方字体,引入方式如下代码片段 /*每个页面公共css */ @font-face {font-family: "al ...
自定义TextView支持第三方字体库(以隶书为例)
下载地址: http://download.csdn.net/download/jackwolf_gao/4973584 描述:自定义TextView支持第三方字体库(以隶书为例) 思路: 1,将字体 ...
html引入微软雅黑,网页引入特殊字体的几种方案
网页使用的字体需要受制于操作系统,如果用户的操作系统没有安装某个字体,网页则会退而求其次的使用系统自带的字体. 因此我们并不能随便使用一些好看的字体,只能选用一些安全字体.比如:Helvetica,A ...

网页引用第三方字体总结

文章目录

字体类型及引用

压缩字体库文件

其他

网页引用第三方字体总结相关推荐

最新文章

热门文章