CSS-fontface
@font-face { font-family: <identifier>; src: <fontsrc> [, <fontsrc>]*; <font>; }
取值:
- <identifier>:
- 字体名称
- <url>:
- 此值指的是你自定义的字体的存放路径,可以是相对路径也可以是绝路径
- <string>:
- 此值指的是你自定义的字体的格式,主要用来帮助浏览器识别,其值主要有以下几种类型:truetype, opentype, embedded-opentype, svg等
- <font>:
- 定义字体相关样式
说明:
- 需要兼容当前的主流浏览器,需同时使用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的更多相关文章
- css font-face自定义字体
font-face:自定义字体 1.找到一个字体文件 2.放入新建的的font的文件夹内: 3.在样式里面以下内容 注释:aa是字体名 <style> @font-face{ fo ...
- CSS3与页面布局学习笔记(五)——Web Font与CSS Sprites(又称CSS精灵、雪碧图)技术
一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...
- css content 如何自定义生成图标?
作者:仅愚链接:https://www.zhihu.com/question/22022905/answer/20585820来源:知乎著作权归作者所有,转载请联系作者获得授权. :before(或: ...
- 再探@font-face及webIcon制作
@font-face 不能说他是什么新东西了,在 CSS2.0 规范中就有了这玩意儿,IE4.0 开始就已经出现,只是当时用的不是特别广泛,后来在 CSS2.1 草案中又被删掉.随着 web 的急速发 ...
- css3 @font-face
很长时间,web设计师总是得用一些“web-safe”字体,英文用body{font-family:"corbel", Arial, Sans-serif; }中文用body{f ...
- 使用自定义字体 @font-face 小试
第一次了解到@font-face是小伙伴给我展示的功能 感觉奇妙的不得了 @font-face 是CSS3中的一个模块 使用它你就可以将你自定义的web字体 去实现一些奇妙的想法 首先先介绍 ...
- @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 ...
- 嵌入字体@font-face
嵌入字体@font-face @font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体. 语法: @font-face { font-family : 字体名称; s ...
- 【CSS3】---嵌入字体@font-face
@font-face能够加载服务器端的字体文件,让浏览器端可以显示用户电脑里没有安装的字体. 语法: @font-face { font-family : 字体名称; src : 字体文件在服务器上的 ...
- font-face 使用
<style type="text/css"> @font-face{ font-family:'Aaargh'; src:url(fonts/Aaargh/Aaarg ...
随机推荐
- Servlet里面request处理外部POST请求的输入流的工具类
package etcom.servlet; import java.io.BufferedReader; import java.io.IOException; import java.io.Inp ...
- Nginx安装部署!
安装Nginx方法一:利用u盘导入Nginx软件包 二nginx -t 用于检测配置文件语法 如下报错1:配置文件43行出现错误 [root@www ~]# nginx -tnginx: [emerg ...
- 一个简单insert 语句执行 40ms 原因剖析
背景:一个简单的带有主键的insert 语句,居然要 40ms ,开发受不了,要求降低 因此我们要关注的的 数据从插入落地的IO 中间都干了什么 一.MySQL的文件 首先简单介绍一下MySQL的数据 ...
- PIP安装模块下载慢或者无法下载
pip下载不动,模块安装失败 由于pip默认的下载源在国外,下载的人也多,难免有时会抽风,下载慢还能熬一熬,有时候就直接安装失败了. 安装gevent模块的的时候,进度条慢悠悠的到达100%,以为马上 ...
- FreeSWITCH 加载模块过程解读
今天来学习FreeSWITCH 加载模块过程. 哪些模块需要编译,是由源码下的 modules.conf 文件决定的. 哪些模块在程序启动时自动加载,是由 freeswitch/conf/autolo ...
- spring boot ApplicationRunner使用
spring boot ApplicationRunner使用 它的使用比较简单,实现ApplicationRunner的run方法 package com.hikvision.pbg.jc.conf ...
- windows下代码规范检测工具sonarqube安装与使用,含与maven的结合
一.首先下载sonarqube 地址 : https://www.sonarqube.org/downloads/ (最新版本支持java11+,博主下载支持java8的版本7.7), 下载S ...
- iframe结构的网站按F5刷新子页面的实现方式
有的网站或者后台系统由于页面有公共的部分,比如菜单,会把公共的部分放在一个页面,这里称之为父页面,而把具体的内容放入一个iframe中,之后的请求改变iframe的内容.但是这样会有一个问题,因为浏览 ...
- Number()、parseInt()、parseFloat()、~~、~
一.Number() 如果是Boolean值,true和false值将分别被转换为1和0. 如果是数字值,只是简单的传入和返回. 如果是null值,返回0. 如果是undefined,返回NaN. 如 ...
- Django 学习视图之FBV与CBV
一. CBV与FBV CBV:Class Based View FBV:Function Based View 我们之前写过的都是基于函数的view,就叫FBV.还可以把view写成基于类的,那就是C ...