CSS-fontface
2024-09-03 12:29:16
@font-face { font-family: <identifier>; src: <fontsrc> [, <fontsrc>]*; <font>; }
取值:
- <identifier>:
- 字体名称
- <url>:
- 此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径
- <string>:
- 此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype, opentype, embedded-opentype, svg等
- <font>:
- 定义字体相关样式
说明:
设置嵌入HTML文档的字体。
- 需要兼容当前的主流浏览器,需同时使用TureTpe(.ttf)、Web Open Font Format(.woff)、Embedded Open Type(.eot)、SVG(.svg)四种字体格式。
- 嵌入HTML文档的字体是指将OpenType字体(压缩的TrueType字体)文件映射到客户端系统,用来提供HTML文档使用该字体,或取代客户端系统已有的同名字体。即让客户端显示客户端所没有安装的字体。
- .eot(Embedded Open Type)为IE的私有字体格式。Safari3.1开始支持.ttf(TrueType)和.otf(OpenType)。
- 未来.woff(Web Open Font Format)将会取代.ttf(TrueType)和.otf(OpenType)两种字体格式。
- 示例:使用一个全浏览器兼容的自定义字体
代码如下:
@font-face { font-family: 'diyfont'; src: url('diyfont.eot'); /* IE9+ */ src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('diyfont.woff') format('woff'), /* chrome、firefox */ url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */ }
你需要同时提供4种格式的字体
最新文章
- svn提交报e200007错误
- [zz]计算 协方差矩阵
- C++ MFC获取软件运行目录 (包含软件名)
- zabbix安装排错过程
- yii2.0安装创建应用shiyong 归档文件安装
- Java常见编码方式简介
- IOS开发-cell的动态高度
- 4554: [Tjoi2016&;Heoi2016]游戏 二分图匹配
- SQL Server 调优:set statistics profile on
- easyui 很好很强大
- CSS样式权值
- lesson - 8 Linux文档的压缩和打包
- Linux学习之CentOS(八)----文件与目录的默认权限与隐藏权限(转)
- Maven可以使用mvn package指令对项目进行打包,如果使用Java -jar xxx.java
- Win10远程桌面 出现 身份验证错误,要求的函数不受支持,这可能是由于CredSSP加密Oracle修正 解决方法
- MySQL系列详解一:MySQL&;&;多实例安装-技术流ken
- 读《31天学会CRM项目开发》记录1 - 认识软件开发
- Json 网络传递解析异常
- Comparing Code Playgrounds Codepen, JSFiddle, JS Bin, Dabblet, CSS Deck, and Liveweave
- c++计时