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

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

取值:

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

CSS-fontface的更多相关文章

  1. css font-face自定义字体

    font-face:自定义字体 1.找到一个字体文件 2.放入新建的的font的文件夹内: 3.在样式里面以下内容 注释:aa是字体名 <style> @font-face{     fo ...

  2. CSS3与页面布局学习笔记(五)——Web Font与CSS Sprites(又称CSS精灵、雪碧图)技术

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  3. css content 如何自定义生成图标?

    作者:仅愚链接:https://www.zhihu.com/question/22022905/answer/20585820来源:知乎著作权归作者所有,转载请联系作者获得授权. :before(或: ...

  4. 再探@font-face及webIcon制作

    @font-face 不能说他是什么新东西了,在 CSS2.0 规范中就有了这玩意儿,IE4.0 开始就已经出现,只是当时用的不是特别广泛,后来在 CSS2.1 草案中又被删掉.随着 web 的急速发 ...

  5. css3 @font-face

    很长时间,web设计师总是得用一些“web-safe”字体,英文用body{font-family:"corbel", Arial, Sans-serif;  }中文用body{f ...

  6. 使用自定义字体 @font-face 小试

    第一次了解到@font-face是小伙伴给我展示的功能  感觉奇妙的不得了    @font-face 是CSS3中的一个模块  使用它你就可以将你自定义的web字体 去实现一些奇妙的想法 首先先介绍 ...

  7. @font-face usage

    If you haven’t been living in a cave for the past few months, you will have heard lots of talk about ...

  8. 嵌入字体@font-face

    嵌入字体@font-face @font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体. 语法: @font-face { font-family : 字体名称; s ...

  9. 【CSS3】---嵌入字体@font-face

    @font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体. 语法: @font-face { font-family : 字体名称; src : 字体文件在服务器上的 ...

  10. font-face 使用

    <style type="text/css"> @font-face{ font-family:'Aaargh'; src:url(fonts/Aaargh/Aaarg ...

随机推荐

  1. HDU 1372 Knight Moves(bfs)

    嗯... 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1372 这是一道很典型的bfs,跟马走日字一个道理,然后用dir数组确定骑士可以走的几个方向, ...

  2. spring boot 动态注入bean

    方法一 SpringContextUtil public class SpringContextUtil { private static ApplicationContext application ...

  3. 前端学习 之 CSS(二)

    五:继承性和层叠性 css有两大特性,即继承性和层叠性. 1. 继承性 面向对象语言都会存在继承的概念,在面向对象语言中,继承的特点:继承了父类的属性和方法.那么我们现在主要研究css,css就是在设 ...

  4. Java中的基本数据类型语法补充

    变量要先赋值后使用 不给变量赋值代表什么 不赋值就使用会怎样 (会报错) 计算并赋值运算符 作用是为了让代码更加简洁.比如 a = a + 10,可以简化为 a+=10 += -= *= /= %= ...

  5. 一 Spring概述

    知识点概要: 1 SpringIOC入门(XML).Spring的Bean管理.Spring属性注入 2 SpringIOC注解方式.Spring的AOP开发(XML) 3 Spring的AOP注解开 ...

  6. 二次代价函数、交叉熵(cross-entropy)、对数似然代价函数(log-likelihood cost)(04-1)

    二次代价函数 $C = \frac{1} {2n} \sum_{x_1,...x_n} \|y(x)-a^L(x) \|^2$ 其中,C表示代价函数,x表示样本,y表示实际值,a表示输出值,n表示样本 ...

  7. 02-05Android学习进度报告五

    今天主要学习了关于Android 开发的关于进度条和拖动条的知识. 主要学习了一些关于进度条的基本属性: android:max:进度条的最大值 android:progress:进度条已完成进度值 ...

  8. Systemverilog for design 笔记(四)

    转载请标明出处 数组.结构体和联合体 1. 结构体(struct) 1.1. 结构体声明 结构体默认是变量,也可以声明为线网 var struct { // 通过var进行结构体变量声明 logic ...

  9. jdbc学习over

    这次的代码和之前学习到一般的代码主要就是将一些很常见的操作(建立连接.清除连接)不管做什么操作都需要用到它们,所以将它们单独放到另一个工具类里面去. 用到的术语: 1.事务:https://www.c ...

  10. 工具 - brackets

    常用插件 blueprint beta file tree view indent guidelines