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

@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。

posted @ 2017-12-19 17:10  书呆子IT_me  阅读(478)  评论(0)    收藏  举报