@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. yp寒假训练一

    19年东北四省省赛 做了J G C 补了E H J签到题 G 题意: 给n个正方形的两个斜对角点坐标,问最小的移动可以重叠(移动上下左右一格) 思路: 一开始想的是中心pos移动,但是可能有小数,而且 ...

  2. 【PAT甲级】1053 Path of Equal Weight (30 分)(DFS)

    题意: 输入三个正整数N,M,S(N<=100,M<N,S<=2^30)分别代表数的结点个数,非叶子结点个数和需要查询的值,接下来输入N个正整数(<1000)代表每个结点的权重 ...

  3. Mapgis地图颜色配置(专题图配置)----对比Arcgis根据属性配置图斑颜色

    对于大多数arcgis用户来说,根据属性配置图斑颜色对于大家来说应该并不陌生.本文将就arcgis图斑颜色设置与mapgis做出比对,为大家提供更为绚丽的地图配色.    Arcgis颜色配置方案 右 ...

  4. Mysql基本用法-left join、right join、 inner join、子查询和join-02

    left join #左连接又叫外连接 left join 返回左表中所有记录和右表中连接字段相等的记录  test_user表 phpcvs表 SQL: select * from test_use ...

  5. 设计模式01 创建型模式 - 单例模式(Singleton Pattern)

    参考 [1] 设计模式之:创建型设计模式(6种) | 博客园 [2] 单例模式的八种写法比较 | 博客园 单例模式(Singleton  Pattern) 确保一个类有且仅有一个实例,并且为客户提供一 ...

  6. 如果你是新晋的leader, 你可能需要了解这些。

    背景 在职业发展的道路上,我们总会面临这样的抉择: 是在技术的路上一条路走到黑,做技术专家 接触管理, 走上管理 年龄大了,搬砖没人要,转型 or 去公司楼下卖炒粉 我曾经有个小小的愿望: 在毕业5年 ...

  7. 「题解」「美团 CodeM 资格赛」跳格子

    目录 「题解」「美团 CodeM 资格赛」跳格子 题目描述 考场思路 思路分析及正解代码 「题解」「美团 CodeM 资格赛」跳格子 今天真的考自闭了... \(T1\) 花了 \(2h\) 都没有搞 ...

  8. 使用win32com操作woord的方法记录

    CSDN博客平台中有众多的 win32com 库操作word 的说明,对于通用的内容将一笔带过,主要介绍目前看来独一无二的内容. import win32com from win32com.clien ...

  9. 执行脚本,且以脚本名保存log

    !/bin/bash path="/sys/devices/platform/soc/fd880000.i2c-pld/i2c-0/i2c-4/i2c-15/15-0060" f_ ...

  10. 吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:引导主体副本

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...