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实现动态的二级三级菜单效果实例源码
Jan 04 HTML / CSS
Css3圆角边框制作代码
Nov 18 HTML / CSS
CSS3实现渐变背景兼容问题
May 06 HTML / CSS
html5中监听canvas内部元素点击事件的三种方法
Apr 28 HTML / CSS
html5 viewport使用方法示例详解
Dec 02 HTML / CSS
html5教程制作简单画板代码分享
Dec 04 HTML / CSS
HTML5 video 视频标签使用介绍
Feb 03 HTML / CSS
HTML5标签使用方法详解
Nov 27 HTML / CSS
使用HTML5在网页中嵌入音频和视频播放的基本方法
Feb 22 HTML / CSS
关于老式浏览器兼容HTML5和CSS3的问题
Jun 01 HTML / CSS
HTML5实现桌面通知 提示功能
Oct 11 HTML / CSS
HTML5 语义化标签(移动端必备)
Aug 23 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
php获取url参数方法总结
2014/11/13 PHP
jquery实现的网页自动播放声音
2014/04/30 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
深入理解JavaScript系列(35):设计模式之迭代器模式详解
2015/03/03 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
js实现继承的5种方式
2015/12/01 Javascript
JavaScript中const、var和let区别浅析
2016/10/11 Javascript
使用base64对图片的二进制进行编码并用ajax进行显示
2017/01/03 Javascript
jQuery实现一个简单的验证码功能
2017/06/26 jQuery
详解如何配置vue-cli3.0的vue.config.js
2018/08/23 Javascript
NodeJS使用Range请求实现下载功能的方法示例
2018/10/12 NodeJs
vue.js多页面开发环境搭建过程
2019/04/24 Javascript
基于vue-draggable 实现三级拖动排序效果
2020/01/10 Javascript
vue实现div单选多选功能
2020/07/16 Javascript
vue路由结构可设一层方便动态添加路由操作
2020/08/31 Javascript
vue+canvas实现拼图小游戏
2020/09/18 Javascript
实例讲解python函数式编程
2014/06/09 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
python中pip的安装与使用教程
2018/08/10 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
python带参数打包exe及调用方式
2019/12/21 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
如何使用pandas读取txt文件中指定的列(有无标题)
2020/03/05 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
Python实现代码块儿折叠
2020/04/15 Python
python爬虫如何解决图片验证码
2021/02/14 Python
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
美国批发零售网站:GearXS
2016/07/26 全球购物
美国最佳选择产品网站:Best Choice Products
2019/05/27 全球购物
世界上最好的野生海鲜和有机食品:Vital Choice
2020/01/16 全球购物
七年级数学教学反思
2014/01/22 职场文书
数控技术专业毕业自荐书范文
2014/02/05 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
2014年安全管理工作总结
2014/12/01 职场文书
初中班干部工作总结
2015/08/10 职场文书
Java设计模式之享元模式示例详解
2022/03/03 Java/Android