Html5自定义字体解决方法


Posted in HTML / CSS onOctober 09, 2019

应用情景

业务搬砖需求需要用原设计稿给出的字体,使用@font-face引入后,发现字体包太大10M左右,每次请求服务器10M流量会造成服务器压力,影响用户体验

第一步:使用@font-face

MDN概述

这是一个叫做@font-face 的CSS @规则 ,它允许网页开发者为其网页指定在线字体。 通过这种作者自备字体的方式,@font-face 可以消除对用户电脑字体的依赖。 @font-face 不仅可以放在在CSS的最顶层, 也可以放在 @规则 的 条件规则组 中。

简单来说就是可以在网页上用自己的字体包 可以放在类似@media媒体查询等@规则中

用法

@font-face CSS at-rule 指定一个用于显示文本的自定义字体;字体能从远程服务器或者用户本地安装的字体加载. 如果提供了local()函数,从用户本地查找指定的字体名称,并且找到了一个匹配项, 本地字体就会被使用. 否则, 字体就会使用url()函数下载的资源。

通过允许作者提供他们自己的字体,@font-face 让设计内容成为了一种可能,同时并不会被所谓的"网络-安全"字体所限制(字体如此普遍以至于它们能被广泛的使用). 指定查找和使用本地安装的字体名称可以让字体的自定义化程度超过基本字体,同时在不依赖网络情况下实现此功能。

在同时使用url()和local()功能时,为了用户已经安装的字体副本在需要使用时被使用,如果在用户本地没有找到字体副本就会去使用户下载的副本查找字体。
@font-face 规则不仅仅使用在CSS的顶层,还可以用在任何CSS条件组规则中.

简单来说就是@font-face 突破网络安全限制,可以让作者自由使用自己想要的字体,可以用在任何css条件组规则中,这里不对其local()函数做额外延伸。

下面贴一个日常用法

@font-face {
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),//后缀是字体文件格式 常见有ttf svg等
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

这里提供一个在线字体转化网站字体格式转化

第二步:字体包压缩

成功引入后,就发现字体包太大了,这里就涉及字体包压缩,使用一个字体包压缩器 font-spider。

font-spider使用

基本原理

通过匹配html中用到的文体,删除剩余没有用到的文字。达到压缩字体包的目的。

安装

npm install font-spider -g

没有安装node npm的同学,请寻找安装方法

使用

@font-face {
    font-family: mysimhei;
    src: url(../../../simhei.ttf);
}
p{
    font-family: mysimhei;
}

注意如果使用要在css文件中先这样引入

font-spider ./demo/*.html

这里的*号是表示匹配全部 也可指定html。

font-spider ./demo/*.html ./demo/pages/index.html

多文件的话用空格分开

压缩完成

会生成一份备份字体文件与压缩后的字体包

Html5自定义字体解决方法

闲谈

其实是对接香港业务,香港的win10操作系统竟然没有黑体,客户觉得字体不一样影响体验,上字体包又太大,所以找出这一套上字体连压缩的解决方法。(卑微实习生)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3截图_动力节点Java学院整理
Jul 11 HTML / CSS
CSS3教程(4):网页边框和网页文字阴影
Apr 02 HTML / CSS
什么是CSS3 HSLA色彩模式?HSLA模拟渐变色条
Apr 26 HTML / CSS
CSS超出文本指定宽度用省略号代替和文本不换行
May 05 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
May 17 HTML / CSS
利用CSS3把图片变成灰色模式的实例代码
Sep 06 HTML / CSS
css3 column实现卡片瀑布流布局的示例代码
Jun 22 HTML / CSS
Html5上传图片 移动端、PC端通用代码
Jun 08 HTML / CSS
整理的15个非常有用的 HTML5 开发教程和速查手册
Oct 18 HTML / CSS
HTML5 新旧语法标记对我们有什么好处
Dec 13 HTML / CSS
html5 video全屏播放/自动播放的实现示例
Aug 06 HTML / CSS
AmazeUI图片轮播效果的示例代码
Aug 20 HTML / CSS
webView加载html图片遇到的问题解决
Oct 08 #HTML / CSS
使用postMessage让 iframe自适应高度的方法示例
Oct 08 #HTML / CSS
基于 HTML5 WebGL 实现的医疗物流系统
Oct 08 #HTML / CSS
html2canvas生成清晰的图片实现打印的示例代码
Sep 30 #HTML / CSS
html5视频媒体标签video的使用方法及完整参数说明详解
Sep 27 #HTML / CSS
Html5实现首页动态视频背景的示例代码
Sep 25 #HTML / CSS
HTML5自定义元素播放焦点图动画的实现
Sep 25 #HTML / CSS
You might like
基于mysql的论坛(6)
2006/10/09 PHP
PHP遍历某个目录下的所有文件和子文件夹的实现代码
2013/06/28 PHP
php中文语义分析实现方法示例
2019/09/28 PHP
WordPress伪静态规则设置代码实例
2020/12/10 PHP
经典的解除许多网站无法复制文字的绝招
2006/12/31 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
2014/02/10 Javascript
浅谈JavaScript 标准对象
2016/06/02 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
js判断一个字符串是以某个字符串开头的简单实例
2016/12/27 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
zTree树形菜单交互选项卡效果的实现方法
2017/12/25 Javascript
微信小程序中使用 async/await的方法实例分析
2020/05/06 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
Vue指令实现OutClick的示例
2020/11/16 Javascript
[14:24]Optic Gaming vs PSG LGD BO3
2018/06/07 DOTA
[57:53]Secret vs Pain 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
用python 制作图片转pdf工具
2015/01/30 Python
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
python中的文件打开与关闭操作命令介绍
2018/04/26 Python
python将字符串转换成json的方法小结
2019/07/09 Python
浅谈Python3 numpy.ptp()最大值与最小值的差
2019/08/24 Python
python实现tail实时查看服务器日志示例
2019/12/24 Python
Pycharm-community-2020.2.3 社区版安装教程图文详解
2020/12/08 Python
HTML5 Canvas 起步(2) - 路径
2009/05/12 HTML / CSS
英国领先的名牌服装折扣零售商:Brown Bag Clothing
2019/01/08 全球购物
介绍一下linux的文件系统
2015/10/06 面试题
你所在的项目是如何确定版本号的
2015/12/28 面试题
Servlet如何得到服务器的信息
2015/12/22 面试题
企业标语口号
2014/06/10 职场文书
公司委托书怎么写
2014/08/02 职场文书
个人收入证明模板
2014/09/18 职场文书
法院个人总结
2015/03/03 职场文书
五年级作文之成长
2019/09/16 职场文书
如何用PHP实现多线程编程
2021/05/26 PHP