语法:

@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. Overt.GrpcTemplate.Service 模板使用教程

    阅读这篇文章需要先阅读我的另外一篇文章,目前还未发布出来,待发布中... 1. Overt.GrpcTemplate.Service .Net Core 3.1 版本 模板名称改成 Overt.Grp ...

  2. drf(请求封装/认证/权限/节流)

    1.请求的封装 class HttpRequest(object): def __init__(self): pass @propery def GET(self): pass @propery de ...

  3. Tries前缀树

    Trie,来源于(retrieval,取回,数据检索),是一种多叉树,用来存储字母表上的单词非常有用. Trie经常用来存储动态集合(dynamic set)或者关联数组(associative ar ...

  4. 面向对象里is-a和has-a的含义

    面向对象的核心思想是:抽象.封装.继承.多态.在实践中用的最多的术语就是 is a(是一个) ,和 has a(有一个).其实他们的意思很简单,对应面向对象设计中的两种形态继承.组合. 一.继承( i ...

  5. loadrunner-事务

    自从安装了loadrunner之后,就没怎么用过它了,项目之前也没做过性能测试,所以学习起来比较困难,而且性能测试远远不止使用工具这么简单.下面介绍一下最近学习的loadrunner添加事务. 事务是 ...

  6. 远程调试docker构建的weblogic

    环境信息 OSType: CentOS Linux 7 (Core) x86_64 3.10.0-957.21.3.el7.x86_64 DockerVersion: 19.03.8 Mirrors: ...

  7. 李瑞红201771010111《面向对象程序设计(java)》第四周学习总结

    实验四:类与对象的定义及使用 第一部分:理论知识学习 1.类与对象概念 (1)类是构造对象的模板或蓝图,由类构造对象的过程称为创建类的实例.   (2)对象:即数据,对象有三个特性,行为.状态.标识. ...

  8. 为arm-unknown-linux-gnueabi-gcc工具链添加常用库(zlib、libpng、libjpeg、libtiff、libtool)(转载)

    主机环境: RHEL6.0 kernel 2.6.32-220.2.1.el6.i686 gcc-4.4.6   1.zlib http://sourceforge.net/projects/libp ...

  9. [SQL]511+512+534+550+569

    511. 游戏玩法分析 I solution SELECT player_id, MIN(event_date) AS first_login FROM Activity GROUP BY playe ...

  10. 实例演示:如何简化生产中的Pod安全策略?

    Pod安全策略对于强化K8S集群安全至关重要.本文将延续之前的文章继续深入介绍Pod安全策略. 首先,简单介绍了如何将Pod与Pod安全策略相关联,并使用RBAC来展示具体步骤.然后介绍如何在Ranc ...