html5怎么将字体变为红色(Html5自定义字体解决方法)
html5怎么将字体变为红色
Html5自定义字体解决方法应用情景
业务搬砖需求需要用原设计稿给出的字体,使用@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基础知识入门(萌新HTML5 入门指南二)
- webui控件在前端开发中的作用(HTML5 weui使用笔记)
- HTML5 播放 RTSP 视频的实例代码(HTML5 播放 RTSP 视频的实例代码)
- HTML5中新增的Input类型
- html5中提供的绘图元素(使用Html5中的cavas画一面国旗)
- html5页面布局框架(html5移动端自适应布局的实现)
- 微信html隐藏功能(使用Html5多媒体实现微信语音功能)
- html5如何控制内容(html5拖拽应用记录及注意点)
- html5新增特性(总结html5自定义属性有哪些)
- html5图片动画制作(HTML5 3D旋转相册的实现示例)
- html5定位地理位置(Html5获取高德地图定位天气的方法)
- html5移动app开发实战(html5启动原生APP总结)
- html5所有特性(HTML5 FileReader对象的具体使用方法)
- HTML5面试题
- h5制作支付功能(基于HTML5+tracking.js实现刷脸支付功能)
- html5 设置缓存(HTML5实现应用程序缓存Application Cache)
- 冬季养殖这6种阴生植物,方便又好养,你家有么(冬季养殖这6种阴生植物)
- 阴生植物为什么不怕照不到阳光(阴生植物为什么不怕照不到阳光)
- 阴生环境 耐阴地被植物,你知道哪些(阴生环境耐阴地被植物)
- 常见的喜阴植物有哪些 养室内盆栽就在这里选(常见的喜阴植物有哪些)
- 这8种耐阴植物,营造阴生植物花境,也是一个不错的选择(营造阴生植物花境)
- 览邦G08 Plus SMART WATCH 测评⑱ 全独立这才是智能手表该有的样子(览邦G08PlusSMART)
热门推荐
- mysqlbinlog怎么分析(MySQL中使用binlog时格式该如何选择)
- tomcat配置远程调试(一次tomcat源码启动控制台中文乱码的调试过程记录)
- :link,:visited,:focus,:hover,:active的用法
- laravel服务器设置(基于Laravel-admin 后台的自定义页面用法详解)
- 虚拟主机哪里有免备案(免备案云主机的真假鉴别)
- group by如何知道分了几组(详解partition by和group by对比)
- python面向对象使用方法(Python面向对象程序设计之私有属性及私有方法示例)
- nginx配置详解(nginx请求限制配置方法)
- 用python编写一个gui(用 Python 构建漂亮的 GUI)
- ASP.NET全角与半角相互转换