引入第三方字体一定要注意字体版权问题

前言

承接上文web 端字体兼容性适配之后，好久没有总结 CSS3 引入字体 @font-face 相关的文章了。一是在掌握 @font-face 的基本使用要领后没遇过兼容性问题，二是觉得 @font-face 已经兼容 ie9+及现代浏览器了，兼容性问题基本可以忽略不计了。事与愿违的是，在多次实战中发现引入第三方字体会出现许多奇形怪状的问题，譬如字体文件的编码问题引发字体可以在桌面系统正常使用而在 Web 端不起作用、字体文件中英文或其他外语的字体行高差异问题、字体文件的等宽比在不同浏览器显示差异问题…现对web 端字体兼容性适配作补充，如果不妥请各位大佬抬手指正(#^.#)。

字体兼容性

字体编码兼容

前段时间有几个需要引入第三方字体的项目，引入过西文、韩文、泰文、以及种类繁多让你眼花缭乱的中文字体，可能是因为引入那种中文字体比较多的缘故吧，老觉得中文字体的兼容性可能会多些，其中编码兼容性像一座大山。

或许你会遇到过这样的情景，字体在 Photoshop 可以正常使用，放在 Web 端通过 @font-face 引入后字体显示不起作用。与相似的还有引入字体在 IE、Firefox 等浏览器正常使用，在 chrome 浏览器却显示编码报错不

CSS3 使用@font-face引入字体的兼容性方案及优化相关推荐

vue项目引入字体图标iconfont
直接将icon下载成图片使用,看此篇一.登入阿里字体图标库选择图标加入购物车下载代码: 解压后,将除了html的文件都复制一份到自己项目assets下: 二.点击打开之前解压的html文件推荐 ...
如何应用font Awesome矢量字体图标介绍
最近做项目开发的时候,一开始做的时候,网页图标icon都是网上现找的,样式不统一先不说,统统都要引入就很麻烦了,要写各种图片路径,简直烦的不要不要的,后来不经意间接触到矢量图标这个东西,一下子来了兴趣 ...
微信小程序引入字体图标
小程序与平常web开发中引入字体图标的方式不一样,必须先转为base64再引入,以阿里巴巴字体图标 http://iconfont.cn 为例: 一.去官网 http://iconfont.cn 下载 ...
css:网页引入字体@font-face以及动态加载字体
css:网页引入网络字体@font-face <style >/* 引入字体 */@font-face {font-family: "站酷高端黑 Regular";fo ...
vue项目引入字体.ttf
1.下载所需要的字体,.ttf格式本文以(FZCYJ.ttf 为例) 2.在src下新建common文件,文件夹中包含以下文件 3.打开font.css @font-face { font-famil ...
css引入本地字体文件,关于css中引入字体文件
关于css中引入字体文件 css样式代码: @font-face { font-family: Lovelo-Black;//定义font的名字 src: url(font/Lovelo Black. ...
使用icomoon引入字体图标及扩充字体图标的方法
何为字体图标? 在说字体图标之前,我们先说一下图片,图片可以让我们的界面更加美丽,但是图片也是有缺点的,比如图片会增加总文件的大小,还会增加额外的HTTP请求,这都会降低网页的性能的.更重要的是图片不 ...
把Font Awesome引入到自己的项目中
问题我之前使用的是通过cdn来引入Font Awesome,https://cdn.jsdelivr.net/gh/FortAwesome/Font-Awesome/css/font-awesome ...
html设置字体变瘦标签,使用CSS3 font-feature-settings特性减除字体动画震颤效果
在做 GithubProfile 项目的时候,使用了数字动画展示的效果,如My GithubProfile页面中的commits,stars以及followers数字.实际使用中,由于数字字体不等宽, ...

CSS3 使用@font-face引入字体的兼容性方案及优化

前言

字体兼容性

字体编码兼容

CSS3 使用@font-face引入字体的兼容性方案及优化相关推荐

最新文章

热门文章