@font-face

  • 版本:CSS3

@font-face的具体语法

@font-face { font-family: <identifier>; src: <fontsrc> [, <fontsrc>]*; <font>; }

<fontsrc> = <url> [format(<string>)]

@font-face的取值介绍

<identifier>
字体名称
<url>
此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径
<string>
此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype, opentype, embedded-opentype, svg等
<font>
定义字体相关样式

@font-face的使用说明

设置嵌入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: 'diyfont';
        src: url('diyfont.eot'); /* IE9+ */
        src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
             url('diyfont.woff') format('woff'), /* chrome、firefox */
             url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
             url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
    }

    你需要同时提供4种格式的字体

兼容性(同时支持.woff,.ttf,.otf,.svg格式的版本将被视为完全实现该属性):

  • 浅绿 = 支持
  • 红色 = 不支持
  • 粉色 = 部分支持
IE Firefox Safari Chrome Opera
6.0-8.0 #2 #3 #4 4.0-34.0 #1 #4 4.0-5.0 #1 #3 4.0 #1 #3 15.0 #1
9.0-11.0 #2 #4 5.1 #1 5.0 #1
  1. 不支持支持微软自有的.eot(Embedded Open Type)格式
  2. 不支持ttf和otf格式(IE9+部分支持)
  3. 不支持woff格式
  4. 不支持svg格式(这里单指svg fonts,非svg技术)

@font-face的完整演示案例

CSS3 Object-fit和Object-position

当然也有修复的方法,但所有人都在说:媒体调整的行为将会失控!是的,现在我们将要解决这个问题。CSS标准提出属性object-fit和object-positio...4月6日

15个无比华丽的HTML5/CSS3动画应用

未来的Web将会是由HTML5主导,当然作为开发者对这一喜讯更为动心。本文主要分享了15个无比华丽的HTML5/CSS3动画应用,供大家参考学习。1...6月6日

一个栗子上手CSS3动画

列举CSS3动画的属性,若需要了解API,可前往MDN。作者:伯乐在线来源:前端大全|2017-05-1115:20最近杂七杂八的事情很多,很多知识都没来得及总结...5月11日

200页的前端开发面试题整理版之HTML5+CSS3(四)

+CSS31.CSS3有哪些新特性?1.CSS3实现圆角(border-radius),阴影(box-shadow),2.对文字加特效(text-shadow、)...4月4日

我们来做一个beautiful的css3鼠标悬停效果

其实一个冒号跟两个冒号没有本质的区别,都是表示在什么什么之前,他这么写主要只是为了区分css2和css3,也就是ie和主流浏览器...4月23日

纯CSS3画出小黄人并实现动画效果

前两天我刚发布了一篇CSS3实现小黄人动画的博客,但是实现的CSS3动画是基于我在站酷网找到的一张小黄人的jpg格式图片,并自己用PS抠出需要实现动画的部分...5月3日

精选10款超酷的HTML5/CSS3菜单

款超酷的HTML5/CSS3菜单,给你的网页添加不一样的精彩,一起来围观一下吧。1、CSS3手风琴菜单下拉展开带弹性动画利用CSS3技术可以实现各种各样的网页菜单...5月24日

网站设计中10个经典的CSS3动效库

深圳网站设计公司科慧设计一般会在网站中加入一些简单而一致的动效,我所用的技术则是用SASS+bourbon来生成出那些基于CSS3的动画效果来...5月11日

纯CSS3做炫酷环形星星发光动画,在简单没思路你也做不出来

这个特效是用CSS3制作的,虽然录制的图片出来看起来很卡,但是实际上还是很顺畅的。想要更多的企业求职加分项目,案例,学习方法可以来一下我的前端群611256580...5月23日

从矩阵与空间操作的关系理解CSS3的transform

不得不提到CSS3的transform,也就是变换。这篇文章概括了在实现时对transform的理解与总结。注:文中的图片多数截取自视频:线性代数的本质...5月13日

移动互联网之路HTML5+CSS3+jQueryMobileAPP与移动网站设计从入门到精通PDF

移动互联网之路(附光盘HTML5+CSS3+jQueryMobileAPP与移动网站设计从入门到精通)(光盘1张)》从实际应用的角度出发,系统地介绍了HTML5...5月17日

css3实现掷骰子(无图)

下面用css3实现的掷骰子效果,骰子点数、面和转动效果都是有css,css3完成的。截图如下:Paste_Image.png1.模板如下:/*span是点数*/2...4月19日

HTML5+CSS3技术(二)CSS使用方法和选择器

css->基础知识HTML负责网页的内容,CSS负责网页的样式,可以减少网页代码量,更能提高网络访问网页的速度...5月26日

精美CSS3聊天窗口 实用的Tooltip和自定义滚动条

这次我们要分享一款基于CSS3和HTML5的自定义聊天窗口,这里要声明的是它并不能完成聊天的功能,只是提供了聊天窗口的UI,包括,聊天语句的Tooltip样式...3月10日

详解用CSS3制作圆形滚动进度条动画效果

家用CSS3制作圆形滚动进度条动画,想不会都难!那么,到底是什么东东呢?先不急,之前我分享了一个css实现进度条效果的博客《CSS实现进度条和订单进度条》,但是呢...2月9日

实现CSS3炫酷的效果可以借助哪些工具

要了解CSS3首先要了解各种浏览器对CSS3支持的情况及目前浏览器的市场占有率情况。截止2016年12月,Chrome(webkit)40.52%、IE814...3月5日

基于CSS3 column多栏布局实现水平滑页翻页交互

星期三,00:10,归类于css相关。阅读74次,今日74次byzhangxinxufromhttp://www...2月15日

CSS·导航条分享到:导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些。简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理...2016年12月19日

CSS3参考手册,全网最新最全的CSS3参考手册,为你呈现最好的CSS3文档CSS3参考手册