@font-face { font-family: <identifier>; src: <fontsrc> [, <fontsrc>]*; <font>; }

<fontsrc> = <url> [format(<string>)]

取值:

<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种格式的字体

最新文章

  1. svn提交报e200007错误
  2. [zz]计算 协方差矩阵
  3. C++ MFC获取软件运行目录 (包含软件名)
  4. zabbix安装排错过程
  5. yii2.0安装创建应用shiyong 归档文件安装
  6. Java常见编码方式简介
  7. IOS开发-cell的动态高度
  8. 4554: [Tjoi2016&amp;Heoi2016]游戏 二分图匹配
  9. SQL Server 调优:set statistics profile on
  10. easyui 很好很强大
  11. CSS样式权值
  12. lesson - 8 Linux文档的压缩和打包
  13. Linux学习之CentOS(八)----文件与目录的默认权限与隐藏权限(转)
  14. Maven可以使用mvn package指令对项目进行打包,如果使用Java -jar xxx.java
  15. Win10远程桌面 出现 身份验证错误,要求的函数不受支持,这可能是由于CredSSP加密Oracle修正 解决方法
  16. MySQL系列详解一:MySQL&amp;&amp;多实例安装-技术流ken
  17. 读《31天学会CRM项目开发》记录1 - 认识软件开发
  18. Json 网络传递解析异常
  19. Comparing Code Playgrounds Codepen, JSFiddle, JS Bin, Dabblet, CSS Deck, and Liveweave
  20. c++计时

热门文章

  1. ANSYS 非线性材料模型简介1 ---常用弹塑性模型
  2. @ResponseBody是如何起作用的
  3. for in 与for 与hasOwnProperty
  4. AS布局篇
  5. String方法阅读笔记
  6. CSS的响应式布局
  7. 最权威的json自定义格式
  8. HashMap中推荐使用entrySet方式遍历Map类集合KV而不是keySet方式遍历
  9. 吴裕雄--天生自然ORACLE数据库学习笔记:管理表空间和数据文件
  10. Laravel 6.X + Vue.js 2.X + Element UI +vue-router 配置