font-face 总结

sPeng 发布于2019-08-29 12:55 / 917人阅读

摘要：说到，第一反应就会想到图标，就会想到阿里的平台，平台有一个编辑功能特别好用，你可以在原先的图标上进行位移放大缩小旋转等其实操作的步骤是平台有一个编辑功能特别好用，你可以在原先的图标上进行位移放大缩小旋转等如果我们手里有一些图标，想转换为的

说到font-face，第一反应就会想到图标，就会想到阿里的iconfont平台，http://www.iconfont.cn/

iconfot平台有一个编辑功能特别好用，你可以在原先的图标上进行位移、放大缩小、旋转等
其实操作的步骤是：

iconfot平台有一个编辑功能特别好用，你可以在原先的图标上进行位移、放大缩小、旋转等
如果我们手里有一些图标，想转换为iconfont的话，可以直接使在线工具转换：
http://image.online-convert.c...

由于各浏览器对font-face字体格式的兼容性问题，所以有时候会需要准备多个格式的不同的字体文件

@font-face {
    font-family: "icons";
    src: url(../font/curiconfont.eot#iefix) format("embedded-opentype"),
         url(../font/curiconfont.woff) format("woff"),
         url(../font/curiconfont.ttf) format("truetype"),
         url(../font/curiconfont.svg?#iconfont) format("svg");
    font-weight: normal;
    font-style: normal;
}

浏览器支持的字体格式如下所示：
IE浏览器-->EOT
Mozilla浏览器-->OTF，TTF
Safari浏览器-->OTF，TTF，SVG
Opera-->OTF，TTF，SVG
Chrome浏览器-->TTF，SVG
使用iconfont的好处如下所示：
iconfont图像放大后，不会失真：字体是矢量的，图像是基于像素的
iconfont节省流量：在图片清晰度高情况下，图片的大小就越大，iconfont颜色由css决定，尺寸要求变大的话，则适应性的变大
iconfont在颜色变幻方面很简单:如果是用图片的话，hover时如果需要变色则需要更换另外一张图片，使用iconfont则只需要更换color就可以了
使用iconfont不足之处：只能支持单色图标；

其实font-face最本质的用处是变量

使用如下代码就可以声明使用微软雅黑事实上显示的是宋体

`@font-face {
font-family: "Microsoft Yahei";
src: local(SimSun);
}`
一般情况下我们声明一个页面上的字体会这样子写：

body {
    font-family: PingFangSC-Regular,HelveticaNeue-Light,"Helvetica Neue Light","Microsoft YaHei",sans-serif;
}

事实上我们可以利用font-face是变量的这一特性，可这如下声明：

@font-face {
  font-family: BASE;
  src: local("HelveticaNeue-Light"), local("Helvetica Neue Light"),  local("PingFang SC"), local("Microsoft YaHei"), local(sans-serif);
}

于是我们使用时就可以这样，这对于多处使用节省了多少代码容量

body {
    font-family: BASE;
}

有的情况下，我想让网页上某一部分字变成自己想要的字体，像如下声明就表示如果用户安装了“方正粗雅宋”就没用任何字体请求，看出local的重要性了吧

@font-face {
  font-family: FZCYS;
  src: local("FZYaSongS-B-GB"), 
       url("FZCYS.woff2"),  
       url("FZCYS.woff"),
       url("FZCYS.ttf");
}

说一下font-face中font-style的妙用吧

@font-face {
  font-family: "I";
  font-style: normal;
  src: local("FZYaoti");
}
@font-face {
  font-family: "I";
  font-style: italic;
  src: local("FZShuTi");
}

在使用I字体时，如果font-style声明的是normal就会使用方正姚体，如果font-style声明的是斜体的话就会使用方正舒体
font-face中的font-weight与font-style使用同理
最有趣的当属unicode-range，一般情况下我们用微软雅黑字体时，引号显示的都会很突兀

这时候unicode-range就派上用场了

@font-face {
  font-family: BASE;
  src: local("Microsoft Yahei");
}
@font-face {
  font-family: quote;
  src: local("SimSun");    
  unicode-range: U+201c, U+201d;
}
.font {
    font-family: quote, BASE;
}

使用如上代码就会变成我们想要的舒服样子

最后附上文章的参考文献：
真正了解CSS3背景下的@font face规则
[聊一聊系列]聊一聊iconfont那些事儿

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112235.html

前端引用字体@font-face的若干优化方法

摘要：前言场景我们在页面展示时，为了更好的效果，一般使用了自定义的字体。之前在开发的时候使用了一些自定义字体，这里总结下自己寻找的的一些处理办法。本文只列出了引入本地字体，网络的字体由于实践不多，这里介绍就少一些。 1 前言 1.1 场景我们在页面展示时，为了更好的效果，一般使用了自定义的字体 @fant-face 。之前在开发的时候使用了一些自定义字体，这里总结下自己寻找的的一些处...

AdolphLWQ 2019-08-26 13:53 评论0 收藏0
前端引用字体@font-face的若干优化方法

摘要：前言场景我们在页面展示时，为了更好的效果，一般使用了自定义的字体。之前在开发的时候使用了一些自定义字体，这里总结下自己寻找的的一些处理办法。本文只列出了引入本地字体，网络的字体由于实践不多，这里介绍就少一些。 1 前言 1.1 场景我们在页面展示时，为了更好的效果，一般使用了自定义的字体 @fant-face 。之前在开发的时候使用了一些自定义字体，这里总结下自己寻找的的一些处...

binta 2019-08-30 10:58 评论0 收藏0
iconfont实践小结

摘要：所以实现小图标时雪碧图跟图标字体会在一个网站共存，自定义图标字体为什么比较耗时，且太复杂图标无法实现请往下看开发流程就了解了。参考资料细谈浅谈图标字体向下兼容优雅降级技术绘制小图标技巧雪碧图图标字体矢量小图标设计本文对应源码源码地址演示地址 showImg(https://segmentfault.com/img/bVRnAC?w=431&h=220); 之前写了一篇关于雪碧图的博文，...

bitkylin 2019-08-29 13:00 评论0 收藏0
使用 @font-face

摘要：允许我们在网页里使用在线字体显示文字。不使用这个命令的话，网页可用的字体会受限于本地计算机的字体，同时非常依赖正在使用的操作系统。大小对比以我目前使用的为例，，，，，。 @font-face允许我们在网页里使用在线字体显示文字。把它写到css中以后，浏览器就会根据其中指明的地址下载对应的字体，然后按照css中的样式来显示字体。不使用这个命令的话，网页可用的字体会受限于本地计算机的字体...

mdluo 2019-08-29 11:15 评论0 收藏0
关于使用WeUI在IE中提示“font-face 未能完成 OpenType 嵌入权限检查。权限必须

摘要：是中定义字体的规则。首先，在使用时，在下没有问题，但是在下提示未能完成嵌入权限检查。访问，将编码转换为文件，这里命名为。保存并浏览器刷新后，中不再提示错误。@font-face是css3中定义字体的规则。首先，在使用weui时，在Chrome、Firefox下没有问题，但是在IE下提示“font-face 未能完成 OpenType 嵌入权限检查。权限必须是可安装的&rdquo...

番茄西红柿 2019-04-23 13:28 评论0 收藏0