@font-face详细用法+实例——Web响应式前端学习笔记

Posted 2021-10-01 来老铁干了这碗代码

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了@font-face详细用法+实例——Web响应式前端学习笔记相关的知识，希望对你有一定的参考价值。

@font-face是CSS3的新特性，用于定义服务器字体。通过@font-face规则，开发者便可以使用用户计算机未安装的字体。

语法格式

@font-face规则的语法格式如下所示。

@font-face {
	   font-family: <YourWebFontName>;
                  src: <source> [<format>][,<source> [<format>]]*;
                 [font-weight: <weight>];
	   [font-style: <style>];
	 }

YourWebFontName：自定义的字体名称，最好是使用下载的默认字体（下载回来的叫什么字体，这里就填什么字体名）。

source：此值指的是自定义的字体的存放路径，可以是相对路径也可以是绝对路径。

format：此值指的是自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype、opentype、truetype-aat、embedded-opentype、svg等；

应用实例

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>@font-face用法</title>
</head>
<style>
@font-face {
    font-family: myFont;
    src:url('fonts/demo2-1/书法.ttf');
}
    div{
        font-family: myFont;
        font-size: 4em;
    }
</style>
<body>
<div>
    使用@font-face，应用漂亮的Web字体
</div>
</body>
</html>

以上是关于@font-face详细用法+实例——Web响应式前端学习笔记的主要内容，如果未能解决你的问题，请参考以下文章