CSS自定义字体(@font-face选择符)
@font-face是CSS中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体。
语法规则:
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
YourWebFontName: 你自定义的字体名称; source: 此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径; format: 此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype,opentype,truetype-aat,embedded-opentype,avg等; weight和style:这两个值大家一定很熟悉,weight定义字体是否为粗体,style主要定义字体样式,如斜体。
兼容浏览器
说到浏览器对@font-face的兼容问题,这里涉及到一个字体format的问题,因为不同的浏览器对字体格式支持是不一致的,这样大家有必要了解一下,各种版本的浏览器支持什么样的字体,前面也简单带到了有关字体的几种格式,下面我就分别说一下这个问题,让大家心里有一个概念:
一、TureTpe(.ttf)格式:
.ttf字体是Windows和Mac的最常见的字体,是一种RAW格式,因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】;
二、OpenType(.otf)格式:
.otf字体被认为是一种原始的字体格式,其内置在TureType的基础上,所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】;
三、Web Open Font Format(.woff)格式:
.woff字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】;
四、Embedded Open Type(.eot)格式:
.eot字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】;
五、SVG(.svg)格式:
.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。
这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体,甚至还需要.svg等字体达到更多种浏览版本的支持。
为了使@font-face达到更多的浏览器支持,Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face:
@font-face { font-family: 'YourWebFontName'; src: url('YourWebFontName.eot?') format('eot');/*IE*/ src:url('YourWebFontName.woff') format('woff'), url('YourWebFontName.ttf') format('truetype');/*non-IE*/ }
但为了让各多的浏览器支持,你也可以写成:
@font-face { font-family: 'YourWebFontName'; src: url('YourWebFontName.eot'); /* IE9 Compat Modes */ src: url('YourWebFontName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('YourWebFontName.woff') format('woff'), /* Modern Browsers */ url('YourWebFontName.ttf') format('truetype'), /* Safari, Android, iOS */ url('YourWebFontName.svg#YourWebFontName') format('svg'); /* Legacy iOS */ }
CSS自定义字体(@font-face选择符)的更多相关文章
- CSS 自定义字体
移动端如何兼容UI给的字体 [toc] 移动端的默认字体 IOS 默认中文字体是Heiti SC 默认英文字体是Helvetica 默认数字字体是HelveticaNeue Android 默认中文字 ...
- CSS自定义select下拉选择框(不用其他标签模拟)
今天群里有人问到怎么自定义select下拉选择框的样式,于是群里就展开了激烈的讨论,刚开始一直就是考虑怎样使用纯CSS实现,把浏览器默认的样式覆盖掉,但最后均因兼容问题处理不好而失败告终,最后的解决方 ...
- css自定义字体
@font-face { font-family: 华文隶书; src: url( ../font/STLITI.eot ); /* IE */ src: url( ../font/STLITI.tt ...
- CSS Pseudo-Element Selectors伪对象选择符
一: CSS3将伪对象选择符(Pseudo-Element Selectors)前面的单个冒号(:)修改为双冒号(::)用以区别伪类选择符(Pseudo-Classes Selectors),但以前的 ...
- CSS自定义字体的实现,前端实现字体压缩
CSS中使用自定义字体,首先需要下载你需要的字体ttf或者otf文件 这里推荐一个网站:http://www.zitixiazai.org/ /********css中********/ @font- ...
- java:CSS(定位,组合选择符,边距,Float,Table的样式,显示和隐藏,换行,盒子模型,iframe和frameset框架)
1.绝对定位,相对定位,fixed定位(指浏览器窗口定位): <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- css自定义字体----使用外部字体文件
css外部自定义字体 给大家分享一个使用的css小技巧!记得收藏呀!相信大家在浏览各种网站会见到各种奇形怪状花里胡哨的文字,还有就是一些浏览器兼容性问题,不会支持一些特殊的字体!给大家分享一个极其简单 ...
- CSS学习(二)选择符
元素选择符:以元素名作为选择符(span{ color: red; }) 群组选择符:将两个选择符用逗号隔开构成群组(span, div{ color: red; }) 通用选择符:通用选择符(*)将 ...
- java 引入自定义字体font后出现的硬盘吃光的问题
有个需求要用美术字体在图片上写字 用自定义的文字有两个方法: 1. Font dynamicFont = Font.createFont(Font.TRUETYPE_FONT, InputStream ...
随机推荐
- Spring MVC http请求地址映射(三)
Spring MVC框架通过扫描将带有@Controller的类中的@RequestMapping的方法进行映射,然后调用映射的方法处理请求,这个分发过程默认是由DispaterServlet处理的. ...
- mysql什么情况下使用索引
表的主关键字 自动建立唯一索引 如zl_yhjbqk(用户基本情况)中的hbs_bh(户标识编号) 表的字段唯一约束 ORACLE利用索引来保证数据的完整性 如lc_hj(流程环节)中的lc_bh+h ...
- Android图片加载框架之Picasso
相信做Android开发的对Square公司一定不会陌生,大名鼎鼎的网络请求框架Retrofit就来源于它,今天学习的是该公司出品的图片加载框架Picasso. 项目地址 https://github ...
- HDU1712:ACboy needs your help(分组背包)
题目:http://acm.hdu.edu.cn/showproblem.php?pid=1712 解释看这里:http://www.cnblogs.com/zhangmingcheng/p/3940 ...
- pkg-config用法和gcc cflags
pkg-config程序是干什么用的?简单的说就是向用户向程序提供相应库的路径.版本号等信息的程序. 譬如说我们运行以下命令:pkg-config 查看gcc的CFLAGS参数 $pkg-confi ...
- Kattis - glitchbot 【DFS】
Kattis - glitchbot [DFS] 题意 有一个机器人 刚开始在(0, 0),然后给出一个目标点,并且会给出一系列指令,但是其中会有一个指令是错误的.我们需要找出那个指令,并且改成正确的 ...
- display:inline-block; 去除间隙的方法 总结:
个人常用: 如: <ul> <li><a href="#" >实时数据</a></li> <li><a ...
- netty1---传统IO和NIO的区别
传统IO: package OIO; import java.io.IOException; import java.io.InputStream; import java.net.ServerSoc ...
- VMWare 网络连接模式(bridged、NAT、host-only)详解
转自VMWare 网络连接模式(bridged.NAT.host-only)详解 host-only 在某些特殊的网络调试环境中,如何要求将真实环境和虚拟环境隔离开,这时你就可采用host-only模 ...
- Linux性能测试分析命令_sar+iostat+vmstat+top
sar主要用于收集并统计系统资源的信息,包括CPU.IO.内存.网卡流量等. vmstat命令主要是对操作系统的虚拟内存.进程.IO读写.CPU活动等整体情况进行统计.但是它不能对某个进程进行深入分析 ...