网页中导入自定义字体并使用

最新推荐文章于 2022-04-05 23:33:49 发布

weixin_30500105

最新推荐文章于 2022-04-05 23:33:49 发布

阅读量334

点赞数

原文链接：http://www.cnblogs.com/-bingyan/p/8066756.html

版权

@font-face是CSS3中的一个模块，它可以把自己定义的Web字体嵌入到网页中。

其使用方法：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>导入自定义字体并使用</title>
    <style>
        @font-face {
            font-family: mainFont;
            src: url('font/fontawesome-webfont.eot?#iefix&v=4.2.0') format('embedded-opentype'), url('font/fontawesome-webfont.woff?v=4.2.0') format('woff'), url('font/fontawesome-webfont.ttf?v=4.2.0') format('truetype'), url('font/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular') format('svg');
            font-weight: normal;
            font-style: normal;
        }
        p {
            font-family: mainFont;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <p>大美女看这里</p>
</body>

</html>

说明：

font-family: <YourWebFontName> ：自定义字库名称。
src ：设置字体的加载路径和格式，通过逗号分隔多个加载路径和格式
srouce ：字体的加载路径，可以是绝对或相对URL。
format ：字体的格式，主要用于浏览器识别，一般有以下几种——truetype,opentype,truetype-aat,embedded-opentype,avg等。
src属性后还有一个 local(font name) 字段，表示从用户系统中加载字体，失败后才加载webfont。

转载于:https://www.cnblogs.com/-bingyan/p/8066756.html

weixin_30500105

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
网页中导入自定义字体并使用

@font-face是CSS3中的一个模块，它可以把自己定义的Web字体嵌入到网页中。其使用方法：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>导入自定义字体并使用</title> &...
复制链接

扫一扫