css3 @font-face 使用自定义字体

最新推荐文章于 2024-03-08 06:30:00 发布

灵灵7

最新推荐文章于 2024-03-08 06:30:00 发布

阅读量1k

点赞数 1

分类专栏： css3

本文链接：https://blog.csdn.net/weixin_41796631/article/details/88594346

版权

css3 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS3 字体描述符

描述符	值	描述
font-family	name	必需。规定字体的名称。
src	URL	必需。定义字体文件的 URL。
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	可选。定义如何拉伸字体。默认是 "normal"。
font-style	ormal italic oblique	可选。定义字体的样式。默认是 "normal"。
font-weight	normal bold 100 200 300 400 500 600 700 800 900	可选。定义字体的粗细。默认是 "normal"。
unicode-range	unicode-range	可选。定义字体支持的 UNICODE 字符范围。默认是 "U+0-10FFFF"。

兼容

浏览器支持

Internet Explorer 9+ 支持新的 @font-face 规则，但是仅支持 .eot 类型的字体 (Embedded OpenType)。
Firefox、Chrome、Safari 以及 Opera 支持 .ttf (True Type Fonts) 和 .otf (OpenType Fonts) 类型的字体。

注释：Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。

如何使用 @font-face

一、定义你的字体：

1. font-family: 自定义字体的名字

2. src: url(...) 在网上下载想要的字体到本地，输入文件地址；也可以使用网络地址（字体文件格式有多种，例如 woff,ttf, svg）

@font-face{
     font-family: '字体名称随便起'; 
     src: url('../font/字体名称.eot');
     src:url('../font/字体名称.woff') format('woff'),
         url('../font/字体名称.ttf') format('truetype'),
         url('../font/字体名称.svg') format('svg');
}

二、把字体样式应用到元素上

div{font-family:"lingfont"}

CSS文件：

知识点：

同一个自定义字体样式中，不同情况（例如粗体）可以设置不同的字体。例子中，用 @font-face 设置了2个自定义样式 "lingfont"，其中一个用于普通格式的元素；另一个添加了样式 font-weight:bold，设置了有粗体格式的文字显示另一个种自定义文字。
@font-face{
    font-family: "lingfont";
    src:url("../font/Arual.ttf");  
}                      /*非粗体文字使用 Arual 字体*/

@font-face{
    font-family: "lingfont";
    src:url("../font/Caratterre ROB.ttf");
    font-weight: bold; /*粗体的文字会使用 Caratterre  字体*/
}

div{font-family:"lingfont"}
html文件：
<!DOCTYPE html>
<html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="css/cc.css" type="text/css" />

<body>

<div>第一句：使用font-face 成功使用了下载的文字样式feaefef。<b>其中，这一句是jiacujiacu加粗体文字bbbbb</b>其余是不加粗字体</div>
<div>第二句errere<span style="font-weight: bold">这里加了加jiacujiacu粗体样式</span>其余是不加粗字体</div>

</body>
</html>
显示效果：

知识点：带<b></b>标签和 style="font-weight: bold" 样式的部分都被认为是加粗部分，

灵灵7

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
css3 @font-face 使用自定义字体

CSS3 字体描述符描述符值描述 font-family name 必需。规定字体的名称。 src URL 必需。定义字体文件的 URL。 font-stretch normal condensed ultra-condensed extra-condensed semi-condensed...
复制链接

扫一扫