@font-face 字体
一.@font-face是CSS3中的一个模块,把自己定义的Web字体嵌入到你网页中
@font-face的语法规则
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
取值说明
1、YourWebFontName:此值指的就是你自定义的字体名称,最好是使用你下载的默认字体,他将被引用到你的Web元素中的font-family。如“font-family:"YourWebFontName";”
2、source:此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径;
3、format:此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype,opentype,truetype-aat,embedded-opentype,avg等;
4、weight和style:这两个值大家一定很熟悉,weight定义字体是否为粗体,style主要定义字体样式,如斜体。
字体格式
1、TureTpe(.ttf)格式:
.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】;
2、OpenType(.otf)格式:
.otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】;
3、Web Open Font Format(.woff)格式:
.woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】;
4、Embedded Open Type(.eot)格式:
.eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】;
5、SVG(.svg)格式:
.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。
// PC一般都全部用, 移动端只用.ttf字体
@font-face {
font-family: 'YourWebFontName';
src: url('YourWebFontName.eot'); /* IE9 Compat Modes */
src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */
url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */
} // 移动端
@font-face {
font-family: 'stcaiyunregular';
src: url('../font/STHUPO.ttf');
font-weight: normal;
font-style: normal;
font-display: swap;
}
二、获取@font-face所需字体格式:
fontsquirrel工具
https://www.fontsquirrel.com/tools/webfont-generator
如果你的项目中是英文网站,而且项目中的Logo,Tags等应用到较多的这种特殊字体效果,我建议你不要使用图片效果,而使用@font-face,但是你是中文网站,我觉得还是使用图片比较合适,因为加载英文字体和图片没有多大区别,但是你加载中文字体,那就不一样了,因为中文字体太大了,这样会影响到项目的某些性能的优化;
以上几点都是在平时制作中常出现的问题,希望大家能小意一些,另外我们没有办法在购买所有字体,就算你实力雄厚,那也没有办法在一台服务器主机上放置你所有项目需要的字体。因此我给大家提供几个免费字体下载的网址:Webfonts,Typekit,Kernest,Google Web Fonts,Kernest,Dafont,Niec Web Type,不然你点这里将有更多的免费字体。前面几个链接是帮助你获取一些优美的怪异的特殊字体,但下面这个工具作用更是无穷的大,他能帮你生成@font-face所需要的各种字体,这工具就是Font Squirrel。
最后在提醒一下,使用@font-face别的可以忘了,但Font Squirrel千万不能忘,因为他能帮你生成@font-face所需的各种字体格式。
三.压缩中文字体
Font-Spider (字蛛)==> 压缩中文字体, 删除没有用到的字体
1.爬行本地 html 文档,分析所有 css 语句
2.记录@font-face语句声明的字体,并且记录使用该字体的 css 选择器
3.通过 css 选择器的规则查找当前 html 文档的节点,记录节点上的文本
4.找到字体文件并删除没被使用的字符
5.编码成跨平台使用的字体格式
地址: http://font-spider.org/
1.安装Font-Spider
npm install font-spider -g 2.转化字体, 删除不需要的字体
font-spider F:\learning\web\index.html 3.会覆盖原来字体文件, 同时生成一个.font-spider文件夹, 存放完整的字体文件
如果手机端, 关于@font-face加载特殊字体在QQ、360浏览器中显示不正常。字体抗锯齿
-webkit-text-stroke-width: 0.2px;
-webkit-font-smoothing: antialiased;
2.使用非阻塞加载CSS
<link rel="stylesheet" type="text/css" href="fonts.css" media="none" onload="this.media='all';">
3.JavaScript 加载web字体, Web字体加载器大多数是通过JavaScript来工作,提供回调,给body设置不同的类名
var f = new FontFace("stcaiyunregular", "url(font/.font-spider/STHUPO.ttf)", {});
f.load().then(function (loadedFace) {
console.log(loadedFace)
document.fonts.add(loadedFace);
localStorage.font = "stcaiyunregular";
document.body.style.fontFamily = "stcaiyunregular";
});
document.fonts.ready.then(function() {
// alert('There are ' + document.fonts.size + ' FontFaces loaded.\n');
});
4.webfontloader ==> 除了提供常用的第三方字体加载方式之外,最主要的功能是可以判断字体加载的各个阶段并赋予相应的 CSS 类来控制目标内容的样式。单独加载font的css文件
地址: https://github.com/typekit/webfontloader
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
<script>
WebFont.load({
custom: {
families: ['stcaiyunregular'],
urls: ['style/font.css']
},
timeout: 2000 // 超时
});
</script>
font.css
@font-face {
font-family: 'stcaiyunregular';
src: url('../font/STHUPO.ttf');
font-weight: normal;
font-style: normal;
font-display: swap; // 后备文本立即显示直到自定义字体加载
}
PS: 使用@font-face存在的问题
1.艺术字体可能有版本问题
2.web加载中文字体时太大, 大多几M以上, 不过可用Font-Spider (字蛛)==> 压缩中文字体, 删除没有用到的字体
3.字体没下载完时, 会出现空白等待期, 可以使用webfontloader插件先回退到其他字体, 然后再转化字体, 有可以会出现字体变化的过程
@font-face 字体的更多相关文章
- Font Awesome字体图标
1.什么是字体图标字体图标是一个包含许多图标的字体库.可以理解为一种特殊的字体,只不过里面包含的都是图标. 2.Font Awesome图标字体库Font Awesome是目前最受欢迎最全面的图标字体 ...
- C#使用Font Awesome字体
这个类是一个开源类,我做了一些功能优化1.如果没有安装Font Awesome字体,可能需要直接去exe路径下使用对应名称字体.2.可以直接返回\uFxxx类型字体,方便winform按钮使用,不然的 ...
- Awesome图标 | 如何在某些编辑软件中使用Font Awesome字体图标
文章目录 Font Awesome 字体图标 在某些编辑软件中使用 Font Awesome 字体图标 Font Awesome 为您提供可缩放矢量图标,它可以被定制大小.颜色.阴影以及任何可以用 C ...
- Font Awesome 字体使用方法, 兼容ie7+
WebFont 技术可以让网页使用在线字体,而无需使用图片,从而有机会解决开头设计师提到的问题.它通过 CSS 的@font-face语句引入在线字体,使用 CSS 选择器指定运用字体的文本,与此同时 ...
- (22)bootstrap 初识 + Font Awesome(字体图标库)
bootstrap作用就是简化布局 bootstrap是基于JQ的,所以内部代码使用的是jq语法 所以要使用bs,必须先倒入 1.head标签内倒入bs的css文件 <link rel=&qu ...
- 在nuxt中引入Font Awesome字体图标库
介绍 在element-ui框架中提供了一些图标样式,但是种类比较少,所以在这里提供一套更完善的字体图标库Font Awesome(官方文档),下面就开始介绍如何在一个nuxt项目中使用这套字体库. ...
- css常用样式font控制字体的多种变换
CSS 字体属性定义文本的字体系列.大小.加粗.风格(如斜体)和变形(如小型大写字母)font-family控制字体,由于各个电脑系统安装的字体不尽相同,但是基本装有黑体.宋体与微软雅黑这三款字体,通 ...
- CSS3使用Font Awesome字体图标的控件样例(按钮,工具栏,输入框)
按钮上加入font awesome图标,用原生的input button标签无法实现,查看网上的只能通过<a><li></li></a>实现此功能,通过 ...
- LaTex Font Size 字体大小命令
LaTex中字体大小有很多中等级,分别由下列命令控制: \tiny \scriptsize \footnotesize \small \normalsize \large \Large \LARGE ...
- font拓展字体
最近接触了一个将字体拓展的方法,感觉很不错,所以积累一下. 最近接触的项目一直再用antd,它本身已经提供了很多图标,但是依然不够用,所以需要我们拓展出来一些. 当我们下载到本地之后,就会有几个文件, ...
随机推荐
- 2016年第七届蓝桥杯C/C++程序设计本科B组省赛
/* 2016年第七届蓝桥杯C/C++程序设计本科B组省赛 煤球数目(结果填空) 煤球数目 有一堆煤球,堆成三角棱锥形.具体: 第一层放1个, 第二层3个(排列成三角形), 第三层6个(排列成三角形) ...
- Windows下进程通信方式
当线程分属于不同进程,也就是分驻在不同的地址空间时,它们之间的通讯需要跨越地址空间的边界,便得采取一些与同一进程中不同线程间通讯不同的方法.在Windows程序中,各个进程之间常常需要交换数据,进行数 ...
- EasyUI的treegrid组件动态加载数据问题的解决办法
http://www.jquerycn.cn/a_3455 —————————————————————————————————————————————————————————————————————— ...
- Python:基本运算、基本函数(包括复数)、Math模块、NumPy模块
基本运算 x**2 : x^2 若x是mat矩阵,那就表示x内每个元素求平方 inf:表示正无穷 逻辑运算符:and,or,not 字典的get方法 a.get(k,d) 1 1 get相当于一条if ...
- Javascript函数声明与函数表达式的区别
在定义函数时,我们一般使用下面这两种方法: 使用函数声明定义: 1 2 3 function sum (a, b) { return a + b; } 使用函数表达式定义: 1 2 3 va ...
- [oracle] 两种权限:系统权限VS对象权限
系统权限表示对表和表空间等 有无操作权 的权限.一般是SYS用户这种DBA来授权.比如: grant create session to lisi grant create table to l ...
- 关于ARM中的tst、cmp、bne、beq指令
一.关于cmp的详细用法 假设现在AX寄存器中的数是0002H,BX寄存器中的数是0003H. 执行的指令是:CMP AX, BX 执行这条指令时,先做用AX中的数减去BX中的数的减法运算. 列出二进 ...
- 关于Cocos2d-x中init方法和onEnter方法的区别
init()和onEnter()这两个方法都是写实例化对象的类(比如继承自Node的一些类等等)的时候用到的方法. 一般都是public类型下面的 bool init(); void onEnter( ...
- ImageNet Classification with Deep Convolutional Neural Networks 论文解读
这个论文应该算是把深度学习应用到图片识别(ILSVRC,ImageNet large-scale Visual Recognition Challenge)上的具有重大意义的一篇文章.因为在之前,人们 ...
- Xenocode Postbuild 2010 for .NET 混淆工具的详细使用步骤【转】
1,首先我们需要去下载这个工具去,我这里倒是有一个下载的网址,已经被破解了,而且有序列号 http://download.csdn.net/tag/Xenocode+Postbuild+2010+fo ...