css3中的自定义字体方法@font-face

@font-face属性可以让我们自定义网站字体属性,然后引用到想要应用该字体的元素上。

基本语法:

@font-face {
font-family: <font-name>;
src: local( <family-name> ) | <url> [format("formatName")][,<url> [format("formatName")]]*;
unicode-range: <unicode-range>;
font-variant: <font-variant>;
font-feature-settings: <font-feature-settings>;
font-variation-settings: <font-variation-settings>;
font-stretch: <font-stretch>;
font-weight: <font-weight>;
font-style: <font-style>;
font-display: <font-display>;
}

属性规则说明

font-family

给你引入的字体起一个专属的字体名字,font-name,然后他会在元素font-family:中使用,如div{font-family:font-name}

src

用于指定加载字体文件的路径或者加载本地字体

local

加载一个本地字体,font-name表示本地的字体名称,比如Microsoft YaHei | 微软雅黑;如果本地有应用此字体显示文本。

示例:

/* 加载一个本地字体 */
@font-face{
font-family: myFont;
src: local('Microsoft YaHei');
}
/* 加载多个本地字体 */
@font-face{
font-family: myFont;
src: local(黑体), local("Microsoft YaHei"), local("HelveticaNeue-Light"), local("Helvetica Neue Light"), local("PingFang SC"), local(sans-serif);
}
/* 应用自定义字体 */
.box{
font-family: myFont;
}

在上边代码中看到,可以使用一个或多个local,多个之间用逗号分开,括号中的字体名称可以使用单引号或者双引号括起来,也可以不带引号直接写字体名称,有空格的必须添加引号,但是只能写一个字体名称

上边的写法让我们在定义字体的时候变得方便很多,我们只需要定义好自定义名称然后直接引用该字体等同于下边代码:

.box{
font-family: 黑体, "Microsoft YaHei", "HelveticaNeue-Light", "Helvetica Neue Light", "PingFang SC", sans-serif;
}

url

表示服务器端提供的字体地址,这个也是可以使用多个,多个之间用逗号隔开,一般写多个是为了浏览器兼容加载不同格式的字体。目前web可以加载六种格式的字体:

  1. EOT:全拼:Embedded_OpenType,是由微软开发的字体格式规范,所以只适用于IE浏览器。详细介绍

兼容:



兼容详情

  1. TTF:全拼:TrueType,是一种轮廓字体标准,最早是由苹果公司研发,后来成为Mac OSMicrosoft Windows系统中最常用的字体格式。详细介绍

兼容:



兼容详情

3. OTF:全拼:OpenType,是可缩放计算机字体的格式,是由微软和Adobe公司联合开发。详细介绍

兼容:



兼容详情

4. WOFF:全拼:Web Open Font Formatweb网络开放字体格式,他是专为网络设计的一种字体格式,WOFF是把OpenTypeTrueType字体进行了封装,并进行了压缩优化,它使用了广泛应用的zlib压缩,并添加了XML元数据,这种字体格式体积更小,适用于网络传输,可以使用户体验做到更好。详细介绍

兼容:



兼容详情

5. WOFF2:它是WOFF的升级版,它使用Brotli进行字节级压缩,比WOFF体积更小

兼容:



兼容详情

  1. SVG:全拼:Scalable Vector Graphics可缩放矢量图形,是一种基于可扩展标记语言(XML)的矢量图像格式,用于二维图形,并支持交互性和动画,字体中就是使用svg技术来呈现文字样式。我测试只有苹果Safari支持; 详细介绍

兼容:



兼容详情

format

可选值,表示给加载的外部字体指定字体格式,用来告诉浏览器让浏览器能够识别所使用的字体格式,可用的类型有 embedded-opentype, truetype, opentype, woff, woff2, svg。分别对应上边我们介绍的字体格式。

语法:

/* 加载一种字体格式 */
@font-face{
font-family: "myFontName";
src: url('font.woff') format('woff');
} /* 加载多个字体格式,兼容更多浏览器 */
@font-face{
font-family: "myFontName";
src: url('font.eot'); /* IE9*/
src: url('font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('font.woff2') format('woff2'),
url('font.woff') format('woff'), /* chrome、firefox */
url('font.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('font.svg#Alibaba-PuHuiTi-Regular') format('svg'); /* iOS 4.1- */
}

从上边语法来看我们可以加载一个格式的字体文件,也可以加载多个格式字体,之间用逗号分开,浏览器会优先读取写在前面的字体格式并且检测是否支持,如果支持就使用该格式的字体文件。

font-weight

表示自定义字体规则的字重程度,我们可以给一个字体指定不同的粗细规则引用不同规格的字体文件。

语法:

/* Single values */
font-weight: normal;
font-weight: bold;
font-weight: 400; /* Multiple Values */
font-weight: normal bold;
font-weight: 300 500;

取值说明:

  1. normal:默认值,表示该字体规则是在默认情况下的字体,也就是在应用改字体的元素中不规定字体的粗细情况或者font-weight: 400 | normal下应用该字体;
  2. bold:粗体,表示元素设置font-weight: bold | 700,或者使用<b><strong>元素的时候应用该字体。
  3. 400:也可以设置成数值,在CSS Fonts Level 4之前的版本只能去100-900的100倍数值,之后的数值可以去1-1000的任意数值。
  4. normal bold:可以使用多个关键字来定义此字体规则,多个关键字之间用逗号分开,表示元素字重设置为此关键字中的其中一个值时应用该字体。
  5. 300 500:也可以使用多个数值来定义此字体规则。

取数值情况下应该对应的每个字体:

value 对应的字体的自重名称
100 Thin (Hairline)
200 Extra Light (Ultra Light)
300 Light
400 Normal
500 Medium
600 Semi Bold (Demi Bold)
700 Bold
800 Extra Bold (Ultra Bold)
900 Black (Heavy)

代码示例:因为字体有版权限制,这里我们使用阿里的免费商用字体来演示

https://codepen.io/qwguo88/full/jObgQYG

从上边的案例我们可以看出,先自定义了一个名为FW的字体,并且使用font-weight定义不同字重使用不同的字体。在上边的案例中定义了5中字重样式,分别是bold阿里巴巴-普惠体-Heavy100杨任东竹石体-Bold200站酷高端黑300 600庞门正道标题体2900思源黑体-粗

然后给div设置font-family:FW;最后我们分别给这个div下的每个段落设置不同的font-weight,段落的字体就会根据不同的字重来应用不同的字体。

我们可以把自定义字体看成我们平常使用系统内置字体一样,当我们设置字体为微软雅黑,并且设置不同的字重他会在系统中寻找每个自重对应的字体,然后来显示。

font-style

表示自定义字体规则的样式表现形式,我们可以给一个字体指定不同的样式规则引用不同规格的字体文件。

语法:

font-style: normal | italic | oblique <angle>{0,2}

取值说明:

  1. normal:默认字样式使用的字体规则,当我们不设置或者设置成此值时的字体。
  2. italic:表示字样式设置成斜体的时候使用的字体规则。
  3. oblique:表示字样式设置成斜体的时候使用的字体规则。

当我们同时定义italicoblique规则的字体时,写在后边的生效所设置的斜体字体显示。

代码示例: https://codepen.io/qwguo88/full/RwWXONo

unicode-range

表示自定义字体规则的unicode字符范围

语法:

/* unicode-range 取值规则 */
unicode-range: U+26; /* 单个值 */
unicode-range: U+0-7F; /* 字符编码区间*/
unicode-range: U+0025-00FF; /* 字符编码区间 */
unicode-range: U+4??; /* 通配符区间 */
unicode-range: U+0025-00FF, U+4??; /* 可以写多个值,多个值之间用逗号分开 */

取值说明:

取值规则:前边是U+后边跟上字符的charCode

  1. 可以是单个值,表示文本中只有该字符的字应用该字体。
  2. 可以使用一个字符区间,表示文本中如果有在此区间的文字将应用改字体规则。
  3. 也可以使用通配符来设置一个区间规则其中?表示一个16进制0-F的之间的值U+4??表示 U+400U+4FF区间的字符编码。
  4. 也可以使用多个值,多个值之间使用逗号分开。

案例:https://codepen.io/qwguo88/full/XWXWqmP

从上边案例可以看出,unicode-range是用来规定应用当前字体规则的文字unicode码在规则内的将以此字体规则显示字体。

他能让我们来控制一个段落中的个别字的显示效果,一般要显示的字体规则排在最前面,将优先显示。

font-display

设置自定义字体在没有加载完的显示方式取值如下:

语法:

font-display: auto | block | swap | fallback | optional
  1. auto:字体显示策略由用户代理定义。
  2. block:为字体提供一个短暂的阻塞周期和无限的交换周期。也就是说等字体加载完以后字体显示效果会自动更新成改字体
  3. swap:为字体提供一个非常小的阻塞周期和无限的交换周期。也就是说等字体加载完以后字体显示效果会自动更新成改字体
  4. fallback:为字体提供一个非常小的阻塞周期和短暂的交换周期。也就是说等字体加载在过了一定的交互周期后加载完字体将不进行更新显示
  5. optional:为字体提供一个非常小的阻塞周期,并且没有交换周期。也就是说等字体加载不进行更新显示

参考网站

  1. https://webplatform.github.io/docs/tutorials/typography/font-face/
  2. https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face/font-display
  3. https://www.zhangxinxu.com/wordpress/2016/11/css-unicode-range-character-font-face/
  4. https://www.w3cplus.com/css/font-display-masses.html

字体下载格式转换网站

  1. https://www.fontke.com/tool/fontface/
  2. http://www.fonts.net.cn/
  3. https://fonts.google.com/

字体压缩工具

  1. http://www.fonts.net.cn/ 字体天下
  2. http://www.ziticq.com/ 字体传奇
  3. https://www.hellofont.cn/ 字由
  4. http://fontstore.baidu.com/static/editor/index.html 百度在线字体编辑器
  5. https://efe.baidu.com/ 百度字体处理
  6. https://www.fontsquirrel.com/tools/webfont-generator 字体格式换
  7. https://www.fontke.com/tool/fontface/ 字体转换

css3中的@font-face你真的了解吗的更多相关文章

  1. CSS3 中border-image详解

    CSS3 border-image详解.应用及jQuery插件 一.border-image的兼容性 border-image可以说是CSS3中的一员大将,将来一定会大放光彩,其应用潜力真的是非常的惊 ...

  2. CSS3中动画属性transform、transition 和 animation

    CSS3中和动画有关的属性有三个 transform.transition 和 animation.下面来一一说明:        transform   从字面来看transform的释义为改变,使 ...

  3. Css3中的响应式布局的应用

    Media Queries直译过来就是“媒体查询”,在我们平时的Web页面中head部分常看到这样的一段代码: <link href="css/reset.css" rel= ...

  4. css3中font-face属性的用法详解

    @font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许 ...

  5. html5--6-16 CSS3中的文字与字体

    html5--6-16 CSS3中的文字与字体 中文字体包很大,少量字体的话可以有其它方法. 有字库-首页-全球第一中文web font(在线字体)服务平台.web font.webfont.在线字体 ...

  6. html5--6-23 CSS3中的文字与字体

    html5--6-23 CSS3中的文字与字体 text-overflow 设置是否使用一个省略标记(...)标示对象内文本的溢出 clip: 默认值当对象内文本溢出时不显示省略标记(...),而是将 ...

  7. html5--6-19 CSS3中的文字与字体

    html5--6-19 CSS3中的文字与字体 学习要点 掌握文字与字体的设置 颜色值查询方法: 百度查询,很多网站有提供 下载相关手册等需要时查表 运用绘图工具中的拾色器 CSS中常用的字体属性设置 ...

  8. css3中rem和em是干嘛的

    css3中rem和em是干嘛的 一.总结 一句话总结:对rem综合评价是用来做web app它绝对是最合适的人选之一. 这里我特别强调web app,web page就不能使用rem吗,其实也当然可以 ...

  9. css3中关于伪类的使用

    目标: css中after伪类,last-child伪类的使用.以及部分css3的属性. 过程: 在制作导航时.常常会遇到在每个li后面加入一个切割符号,到最后一个元素的时候,切割符就会去掉的一种效果 ...

随机推荐

  1. Java多线程相关面试题及答案-整理

    1.什么是线程? 线程是操作系统能够进行运算调度的最小单位,它被包含在进程之中,是进程中的实际运作单位.程序员可以通过它进行多处理器编程,你可以使用多线程对 运算密集型任务提速.比如,如果一个线程完成 ...

  2. C# 数据操作系列 - 12 NHibernate的增删改查

    0. 前言 上一篇<C# 数据操作系列 - 11 NHibernate 配置和结构介绍> 介绍了Nhibernate里的配置内容.这一篇将带领大家了解一下如何使用NHIbernate.之前 ...

  3. MySQL 8.0用户及安全管理

    用户的功能 登录数据库 管理数据库对象 用户的组成 用户名@'白名单' 白名单: % 10.0.0.10 .% 10.0.0.5% 10.0.0.0/255.255.254.0 oldguo.com ...

  4. 高德SD地图数据生产自动化技术的路线与实践(道路篇)

    一.背景及现状 近些年,国内道路交通及相关设施的基础建设日新月异.广大用户日常出行需求旺盛,对所使用到的电子地图产品的数据质量和现势性提出了更高的要求.传统的地图数据采集和生产过程,即通过采集设备实地 ...

  5. [PHP学习教程 - 网络]004.模拟发送HTTP请求[GET/POST](HTTP Simulator)

    引言:经常在开发期间,客户端与服务端的调试都是借助于真实的容器返回.尤其是在处理到POST时,通常刚刚入门的兄弟姐妹就一定要借助容器.今天,我们就来处理一下模拟HTTP. 本文列举了常见的四种请求方式 ...

  6. [工具-001]C++更换EXE的ICON图标

    我们都知道每个可执行文件EXE都会有自己的图标,它可以在项目生成的时候进行指认,但是有时候我们会遇到两种情况:1.没有源代码,2.我们的项目很多,一个个进行更换很耗时.本人就是因为接到这么一个需求,要 ...

  7. centos7 在docker下安装mongodb

    第一步:安装 1.1 查找(查看)mongo相应的版本 [root@localhost ~]# docker search mongo INDEX NAME DESCRIPTION STARS OFF ...

  8. Chisel3 - 复合数据类型

    https://mp.weixin.qq.com/s/rXYqiZKuBpAYL8R94zxgRA   Chisel允许用户根据需要,把基本数据类型组合成为复合数据类型使用.如C语言里面的结构体,这样 ...

  9. 面试题: SpringBoot 的自动配置原理

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 3.Spring Boot 的自动配置原理 package com.mmall; import org. ...

  10. Java实现 蓝桥杯 算法提高VIP 摆花 dp 记忆搜索 2种做法 多重背包

    题目描述 小明的花店新开张,为了吸引顾客,他想在花店的门口摆上一排花,共m盆.通过调查顾客的喜好,小明列出了顾客最喜欢的n种花,从1到n标号.为了在门口展出更多种花,规定第i种花不能超过ai盆,摆花时 ...