语法:

@font-face { font-family: <identifier>; src: <fontsrc> [, <fontsrc>]*; <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: myfont;
src: url('webfont/iconfont.eot'); /*IE9+:EOT*/
src: url('webfont/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont/iconfont.woff') format('woff'), /* chrome、firefox */
url('webfont/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('webfont/iconfont.svg#svgFontName') format('svg'); /* iOS 4.1- */
font-weight: normal;
font-style: normal;
}

 

在线字体转换器:

https://www.fontke.com/tool/convfont/

web font各浏览器兼容问题以及格式的更多相关文章

  1. web前端 关于浏览器兼容的一些知识和问题解决

    浏览器兼容 为什么产生浏览器兼容,浏览器兼容问题什么是浏览器兼容: 所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况. 浏览器兼容产生的原因: 因为不 ...

  2. WEB标准:标准定义、好处、名词解释、常用术语、命名习惯、浏览器兼容、代码书写规范

    1. WEB标准是什么? “WEB标准”是一系列标准的总称.一般的误区经常把WEB标准说成DIV+CSS.准确的说法应该是:采用W3C推荐的WEB标准中的XHTML1.1结合CSS2.0 样式表制作页 ...

  3. 【转】Web前端浏览器兼容初探

    原文地址:http://blog.jobbole.com/38638/ 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: ...

  4. Web前端浏览器兼容初探

    浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 1 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后端 ...

  5. [转]Web前端浏览器兼容

    转自: http://www.admin10000.com/document/1900.html 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易 ...

  6. web前端~~浏览器兼容问题(百度)

    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...

  7. WEB前端开发人员须知的常见浏览器兼容问题及解决技巧

    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...

  8. 浅谈Web前端浏览器兼容问题

    对于兼容最近一直困扰我,以前写的代码只是针对高质量用户来使用 不考虑IE7,8 这样的浏览器 ,但是最近我开发的时候必须要兼容,大喊一声我曹,没有办法,自己来吧! 所谓的浏览器兼容性问题,是指因为不同 ...

  9. Web前端浏览器兼容问题

    所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...

随机推荐

  1. LinkedHashMap源码解读

    1. 前言 还是从面试中来,到面试中去.面试官在面试 Redis 的时候经常会问到,Redis 的 LRU 是如何实现的?如果让你实现 LRU 算法,你会怎么实现呢?除了用现有的结构 LinkedHa ...

  2. eclipse代码提示完善

    转载请注明出处:https://www.cnblogs.com/Higurashi-kagome/p/12263267.html 1.参考https://blog.csdn.net/ithomer/a ...

  3. Lucene查询语法汇总

    目录 一.单词查询 二.通配符查询 三.模糊查询 四.近似查询 五.范围查询 六.优先级查询 七.逻辑操作 八.括号分组 九.转义特殊字符 Lucene是目前最为流行的开源全文搜索引擎工具包,提供了完 ...

  4. Simulink仿真入门到精通(二) Simulink模块

    2.1 Simulink模块的组成要素 用户构建系统模型时无需直接面对成千上万行的代码,而是通过模块化图形界面以模块化的方式构建,能够使理解变得容易,让大脑减负.通过层次化模块分布将系统功能模块化,而 ...

  5. cooke和session

    一.装饰器要加入funtools.wrap装饰 保留函数的元数据(函数名/注释) 1.装饰器 def wrapper(f): def inner(*args,**kwargs): return f(* ...

  6. Python 装饰器(无参,有参、多重))

    Python装饰器介绍 在Python中,装饰器(decorator)是在闭包的基础上发展起来的. 装饰器的实质是一个高阶函数,其参数是要装饰的函数名,其返回值是完成装饰的函数名,其作用是为已经存在的 ...

  7. Rust入坑指南:齐头并进(上)

    我们知道,如今CPU的计算能力已经非常强大,其速度比内存要高出许多个数量级.为了充分利用CPU资源,多数编程语言都提供了并发编程的能力,Rust也不例外. 聊到并发,就离不开多进程和多线程这两个概念. ...

  8. JAVA-迭代器\增强型for循环。(新手)

    //导入的包.import java.lang.reflect.Array;import java.util.*;//创建的一个类.public class zylx1 { //公共静态的主方法. p ...

  9. iOS开发:十六进制颜色转UIColor

    Objective-C UIColor * __nullable UIColorFromHexValue(NSUInteger hexValue) { CGFloat red = (hexValue ...

  10. Element没更新了?Element没更新,基于El的扩展库更新

    think-vuele 基于Vue和ElementUI框架进行整合二次开发的一个框架.提供一些elementUI没有的或当时没有的控件.优化了或简化了便于2B软件开发的一些控件 demo:http:/ ...