web font各浏览器兼容问题以及格式
语法:
@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各浏览器兼容问题以及格式的更多相关文章
- web前端 关于浏览器兼容的一些知识和问题解决
浏览器兼容 为什么产生浏览器兼容,浏览器兼容问题什么是浏览器兼容: 所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况. 浏览器兼容产生的原因: 因为不 ...
- WEB标准:标准定义、好处、名词解释、常用术语、命名习惯、浏览器兼容、代码书写规范
1. WEB标准是什么? “WEB标准”是一系列标准的总称.一般的误区经常把WEB标准说成DIV+CSS.准确的说法应该是:采用W3C推荐的WEB标准中的XHTML1.1结合CSS2.0 样式表制作页 ...
- 【转】Web前端浏览器兼容初探
原文地址:http://blog.jobbole.com/38638/ 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: ...
- Web前端浏览器兼容初探
浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易选择忽略,而形成两个极端: 1 我最开始都是使用IE6,IE6上没问题,其它浏览器坑爹(多出现与前端后端 ...
- [转]Web前端浏览器兼容
转自: http://www.admin10000.com/document/1900.html 前言 浏览器兼容是前端开发人员必须掌握的一个技能,但是初入前端的同学或者其他后台web开发同学往往容易 ...
- web前端~~浏览器兼容问题(百度)
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...
- WEB前端开发人员须知的常见浏览器兼容问题及解决技巧
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...
- 浅谈Web前端浏览器兼容问题
对于兼容最近一直困扰我,以前写的代码只是针对高质量用户来使用 不考虑IE7,8 这样的浏览器 ,但是最近我开发的时候必须要兼容,大喊一声我曹,没有办法,自己来吧! 所谓的浏览器兼容性问题,是指因为不同 ...
- Web前端浏览器兼容问题
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况.在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的 ...
随机推荐
- TEA5676 + AT24C08 FM收音机 搜台 存台 mmap 实现读写
硬件说明TEA5767 + AT24c08 要使用耳机收听,不加功放芯片,声音非常小. 这2个芯片都支持 3.3 或 5.0 电源支持连线比较简单,sda scl 接到 2440 对应的 排针上,找出 ...
- 网络|N1盒子做旁路由刷OpenWRT系统(小白专用)
N1盒子做旁路由刷OpenWRT系统(小白专用) 为什么要用N1盒子 现如今新上市的路由器,市面上能买到的300元以内的路由器大多数都是双频(5G Hz和2.4G Hz)和几年前相比无论是速度还是性能 ...
- 设计模式之委派模式,大名鼎鼎的Spring都在用
什么是委派模式 虽然说委派模式不属于Gof23中设计模式,但这并不影响它成为一种经典的设计模式. "委派"字面意思就是指派一件事情给某人.类比到生活中的场景,比如项目leader指 ...
- ES6: let 与 const
ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const. let 声明的变量只在 let 命令所在的代码块内有效. const 声明一个只读的常量,一旦声明 ...
- inspect的使用安卓动态分析工具
一.安装步骤 1.安装xposed 2.安装inspect 二.inspect 一个基于Xposed 开发的应用动态分析工具 github已开源 内置web页面 体验度很不错 ‘ 核心功能 监控Sha ...
- 会话存储sessionStorage
会话存储的工作方式和本地存储的工作方式很接近,不同之处在于数据是各个浏览器上下文私有的,会在文档被关闭时移除(注意是被关闭时才移除,刷新是不会移除的).我们通过全局sessionStorage访问会话 ...
- Gitblit无法查看单个文件解决方案
一个简单的解决方案是在reference.properties中设置: web.mountParameters = false 在这种情况下,您完全避免了该问题,因为项目名称,分支和文件名作为查询字符 ...
- 使用Jmeter进行压力测试结果偏差较大原因分析
Apache软件基金会(ASF)是一家总部位于美国的非营利性慈善组织.ASF的所有产品都通过公共论坛的在线协作开发,并从美国境内的中央服务器分发.Jmeter是ASF的一款开源免费软件 ,在国内被很多 ...
- 破解WIFI教程
今日主题:如何破解WIFI 准备工具 笔记本一台 usb无线网卡[我用的是小米的] kali系统[可以在虚拟机里装,建议用2019年及以下版本] VMware Workstation15虚拟机安装 可 ...
- Servlet(三)----Servlet体系与HTTP
## Servlet的体系结构 Servlet --- 接口 | | GenericServlet --- 抽象类 | | HttpServlet -- 抽象类 GenericServle ...