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 border-image详解、应用及jQuery插件
Aug 29 HTML / CSS
CSS3转换功能transform主要属性值分析及实现分享
May 06 HTML / CSS
利用css3实现的简单的鼠标悬停按钮
Nov 04 HTML / CSS
一款纯css3实现简单的checkbox复选框和radio单选框
Nov 05 HTML / CSS
CSS3中的transform属性进行2D和3D变换的基本用法
May 12 HTML / CSS
Css3新特性应用之视觉效果实例
Dec 12 HTML / CSS
纯CSS3大转盘抽奖示例代码(响应式、可配置)
Jan 13 HTML / CSS
HTML中fieldset标签概述及使用方法
Feb 01 HTML / CSS
使用HTML5的File实现base64和图片的互转
Aug 01 HTML / CSS
html5.2 dialog简介详解
Feb 27 HTML / CSS
3种方式实现瀑布流布局小结
Sep 05 HTML / CSS
使用CSS实现音波加载效果
May 07 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
改造一台复古桌面收音机
2021/03/02 无线电
Search Engine Friendly的URL设计
2006/10/09 PHP
DedeCms模板安装/制作概述
2007/03/11 PHP
PHP针对常规模板引擎中与CSS/JSON冲突的解决方法
2014/08/19 PHP
谈谈你对Zend SAPIs(Zend SAPI Internals)的理解
2015/11/10 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
laravel5环境隐藏index.php后缀(apache)的方法
2019/10/12 PHP
TP5框架请求响应参数实例分析
2019/10/17 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
php7 新增功能实例总结
2020/05/25 PHP
js constructor的实际作用分析
2011/11/15 Javascript
每天一篇javascript学习小结(String对象)
2015/11/18 Javascript
jQuery插件AjaxFileUpload实现ajax文件上传
2016/05/05 Javascript
KnockoutJS 3.X API 第四章之数据控制流component绑定
2016/10/10 Javascript
不使用script导入js文件的几种方法
2016/10/27 Javascript
Node.js利用Net模块实现多人命令行聊天室的方法
2016/12/23 Javascript
防止重复发送 Ajax 请求
2017/02/15 Javascript
基于vue2实现上拉加载功能
2017/11/28 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
vue鼠标悬停事件实例详解
2019/04/01 Javascript
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
Python定时任务sched模块用法示例
2018/07/16 Python
python微元法计算函数曲线长度的方法
2018/11/08 Python
python使用pdfminer解析pdf文件的方法示例
2018/12/20 Python
Scrapy 配置动态代理IP的实现
2020/09/28 Python
Python里面如何拷贝一个对象
2014/02/17 面试题
个人自我评价和职业目标
2014/01/24 职场文书
学习党的群众路线实践活动思想汇报
2014/09/12 职场文书
苏州园林导游词
2015/02/03 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
毕业论文致谢词
2015/05/14 职场文书
《观潮》教学反思
2016/02/17 职场文书
七年级写作指导之游记作文
2019/10/07 职场文书
浅谈Redis变慢的原因及排查方法
2022/06/21 Redis