语法:

@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. wentiqingdan

    1. Python不用在行尾加分号,也不要用分号将两条命令放在同一行,但加上分号也能执行,不像C/C++分号是必须加的,缺了就会出错. 2. C属于编译型语言,Python属解型语言 编译型的优点是& ...

  2. flask 设置https请求 访问flask服务器

    学习过程中想要学教程中一样,做个假的微信公众号推送,不过去了微信开发文档怎么一直说需要https的请求(教学中没有说需要https,一直是http) 但是我的服务器只能使用http请求访问,如果硬是要 ...

  3. FastDFS源码学习(一)FastDFS介绍及源码编译安装

    FastDFS是淘宝的余庆主导开发的一个分布式文件系统,采用C语言开发,性能较优.在淘宝网.京东商城.支付宝和某些网盘等系统均有使用,使用场景十分广泛. 下图来源:https://blog.csdn. ...

  4. Session的常用方法

    Session的常用方法 session对象主要用于属性操作和会话管理,常用方法如下: 1.public void setAttribute(String name,String value)设定指定 ...

  5. 【盘它!】那些让效率MAX的工具和方法(Mac篇)

    一.前言 人类之所以伟大,是因为会创造并使用工具! 工欲善其事必先利器.高效的工具和方法不仅能最大化 节省我们的时间,还可以一定程度上让我们 保持专注,以达到 事半功倍 的效果. 但仅仅有工具不会使用 ...

  6. 在MacOS上利用docker构建buildroot

    之前有听说过docker,但是一直没有使用过.最近终于下定决定使用了一下docker,感觉docker用于跨操作系统的软件工具使用还是比较友好的. 适用人群 本文忽略的部分Linux软件包安装的过程, ...

  7. Selenium系列(二) - 控制浏览器操作的详细解读

    如果你还不想从头学起Selenium,可以看看这个系列的文章哦! https://www.cnblogs.com/poloyy/category/1680176.html 其次,如果你不懂前端基础知识 ...

  8. Java基础语法(1)-关键字与保留字

    title: Java基础语法(1)-关键字与保留字 blog: CSDN data: Java学习路线及视频 1.关键字 关键字(keyword)的定义和特点 定义:被Java语言赋予了特殊含义,用 ...

  9. Linux & Shell 学习笔记【1/2】

    因为工作上的需要,花了些许时间去熟悉学习Linux和Shell,现在也花点事件在此记录一下以加强巩固学习的内容吧.学的不算深入,所以都是一些比较junior的内容. 在下一篇随笔会详述之前写的一个用于 ...

  10. php解析配置文件

    php解析配置文件 标签(空格分隔): php .ini格式 ![](https://img2020.cnblogs.com/blog/1458583/202003/1458583-202003301 ...