html自定义字体,html5设置字体

　　应用情景

　　商务搬砖需要使用原设计稿中给出的字体。用@font-face介绍后发现，字体包大概有10M大，每次请求服务器10M流量都会造成服务器压力，影响用户体验。

　　第一步：使用@font-face

　　MDN概述

　　这是一个名为@font-face的CSS @规则，它允许web开发人员为他们的网页指定在线字体。@font-face可以通过作者自带字体的方式，消除对用户电脑字体的依赖。@font-face不仅可以放在CSS的顶部，还可以放在@ rule的条件规则组中。

　　简单来说就是可以在网页上使用自己的字体包，放入@ rules比如@media media query。

　　用法

　　@font-face CSS at-rule指定显示文本的自定义字体；字体可以从远程服务器加载，也可以由用户在本地安装。如果提供了local()函数，则当用户在本地找到指定的字体名称并找到匹配时，将使用本地字体。否则，字体将使用url()函数下载的资源。

　　通过允许作者提供自己的字体，@font-face使设计内容成为可能，同时不受所谓‘网络安全’字体的限制(字体如此普遍，可以广泛使用)。指定查找和使用本地安装的字体名称，可以使字体比基本字体更具定制性，同时不依赖网络实现该功能。

　　同时使用url()和local()函数时，为了让用户已经安装的字体副本在需要使用的时候使用，如果在本地没有找到字体副本，用户会要求下载的副本找到字体。

　　@font-face规则不仅用在CSS的顶层，还用在任何CSS条件分组规则中。

　　简单来说，@font-face突破网络安全限制，让作者自由使用自己想要的字体。可以在任何css条件分组规则中使用，这里不扩展它的local()函数。

　　在下面贴一个日常用法。

　　@font-face { font-family:打开Sans ；src:URL(/fonts/open sans-regular-web font . woff2 )格式( woff 2 )，//后缀为常见字体文件格式的URL(/fonts/open sans-regular-web font . woff )格式( woff )；}这里有一个在线字体转换网站字体格式转换。

　　第二步：字体包压缩

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

　　font-spider使用

　　基本原理

　　通过匹配html中使用的样式，删除剩余的未使用的单词。达到压缩字体包的目的。

　　固定

　　m安装font-spider-g没有同学安装了node npm。请找到安装方法。

　　使用

　　@ font-face { font-family:mysimhei；src: url(./././sim hei . TTF)；} p { font-family:mysimhei；}注意，如果使用的话，首先要在css文件中进行介绍。

　　字体-蜘蛛。/demo/*。html此处的*号表示匹配所有或指定html。

　　字体-蜘蛛。/demo/*.html，/demo/pages/index.html用空格分隔多个文件。

　　压缩完成

　　将生成一个备份字体文件和压缩字体包。

　　闲谈

　　其实是香港的一个对接业务。香港的win10操作系统没有黑体字。客户觉得字体不一样影响体验，字体包太大，想办法用压缩解决这套字体。(卑微的实习生)

　　这就是本文的全部内容。希望对大家的学习和支持有帮助。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。