嵌入Web字体 ---- @font-face
来源:互联网 发布:数控编程指令大全 编辑:程序博客网 时间:2024/05/07 19:27
嵌入Web字体
一、@font-face模块介绍
@font-face主要是把自己定义的Web字体嵌入到Web页面中,这些自定义字体就被放置到了服务器上,浏览器即可根据指定命令将对应字体下载到本地缓存,用它来实现特殊字体效果。
二、@font-face兼容
@font-face最早属于css2,现如今为css3属性故,兼容性上目前主流浏览器均可实现完美支持。三、@font-face语法
@font-face {font-family: "MSJHBD"; --------------自定义的名称,我们取名为“MSJHBD ”
src: url("font/MSJHBD.eot");
src: url("font/MSJHBD.eot?#iefix") format("embedded-opentype"), --------------对应的几种路径和格式
url("font/MSJHBD.woff") format("woff"),
url("font/MSJHBD.ttf") format("truetype"),
url("font/MSJHBD.svg#MSJHBD") format("svg");
font-style: normal;
font-weight: normal;
}
PS:按照往常的话,需要到网上下载对应的字体格式版本然后通过某些第三方的软件进行格式翻译,或者手动抠文字这样会浪费大把的时间,目前最新出了一款更加快捷的软件:fontmin
特殊字体神器-fontmin 的使用
fontmin下载
fontmin官网:http://ecomfe.github.io/fontmin
fontmin的具体操作
1 打开软件(无需安装,打开即用)
2 输入需要采用特殊字体的文字
3 将字体拖拽到相应位置,点击“生成”
4 把生成的文件复制/剪切到指定位置即可
2 输入需要采用特殊字体的文字
3 将字体拖拽到相应位置,点击“生成”
4 把生成的文件复制/剪切到指定位置即可
会生成各类字体文件,同时还有CSS文件,可以使用编辑器打开CSS文件,内容如下(我此处使用的是MSJHBD的字体)
CSS代码:
@font-face {font-family: "MSJHBD";src: url("font/MSJHBD.eot");src: url("font/MSJHBD.eot?#iefix") format("embedded-opentype"), url("font/MSJHBD.woff") format("woff"),url("font/MSJHBD.ttf") format("truetype"),url("font/MSJHBD.svg#MSJHBD") format("svg");font-style: normal;font-weight: normal;}
以下是页面测试的效果:
0 0
- 嵌入Web字体 ---- @font-face
- 嵌入字体@font-face
- 【CSS3】---嵌入字体@font-face
- 【CSS3】嵌入字体@font-face
- CSS3嵌入字体@font-face
- Web字体 ---- @font-face
- 自定义web字体-通过@font-face在网页中嵌入自定义字体
- 6.(初级)web字体之:@font-face
- 如何在网页中通过@font-face中嵌入中文字体(Web font)
- 客户端字体(Font Face)示例
- css网络字体@font-face
- font-face外部字体引入
- CSS生成字体@font-face
- 导入页面字体@font-face
- @face-font调用服务器字体
- CSS3 特殊字体@font-face
- Flex中如何在mx:Style中用@font-face,在Flash SWF中嵌入字体
- CSS3.0新属性之@font-face在网页中嵌入字体
- ContentProvider 封装file
- 你不知道的Android5.0转场共享动画实现炫酷效果 minSdkVersion 21
- 数组与集合
- 存储过程基础(For MySQL)
- python3 import
- 嵌入Web字体 ---- @font-face
- Java 异常的捕获与处理详解(一)
- 【机房重构】 抽象工厂+反射+配置文件(下)
- poj 1011 sticks (dfs + 剪枝)
- codeforces 785D Anton and School
- linux 内核模块学习
- Android官方Guide回顾补漏
- 判断按钮的弹起和点击事件 mfc
- pip 指定源