Html5自定义字体解决方法

网页制作 2024/12/29 佚名

3 1 2

应用情景

业务搬砖需求需要用原设计稿给出的字体，使用@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

多文件的话用空格分开

压缩完成

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

闲谈

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

Html5,自定义字体

风云阁资源网 Design By www.bgabc.com

广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！

风云阁资源网 Design By www.bgabc.com

评论“Html5自定义字体解决方法”

暂无评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新日志

2024年12月29日

Html5自定义字体解决方法

HTML table 表格边框的实现思路

webView加载html图片遇到的问题解决

评论“Html5自定义字体解决方法”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新日志

友情链接