@face-font调用服务器字体

来源：互联网发布：hexo博客绑定域名编辑：程序博客网时间：2024/05/19 21:16

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>服务器字体</title>    <style>/*  调用服务器字体，自定义font-family，然后再利用src属性的url方法调用文件*/        @font-face{            src:url("AC_Filmstrip.otf");            font-family: webfont;        }        @font-face{            src:url("segmdl2.ttf");            font-style: italic;            font-family: webfont;        }        @font-face{            src:url("seguisym.ttf");            font-style: bold;            font-family: webfont;        }        p{            font-family: "webfont";        }        p.test1{            font-style: italic;            font-family: "webfont";        }        p.test2{                font-style: bold;            font-family: "webfont";        }    </style></head><body>    <p>hello world</p>    <p class="test1">hello world</p>    <p class="test2">hello world</p></body></html>

可以用@face-font调用服务器的字体，语法如下：
@face-font{
src:url(字体文件的url路径);
font-family:自定义字体;
font-style:默认（不填）| italic | bold;
}
从上面的代码可以看出，用@face-font设置了字体文件以后，
p元素就可以使用服务器中的字体了，font-style这个属性如果设置不同的值。在调用自定义字体时，如果元素的font-style属性的值跟@face-style中的font-style一样的话，就可变成相应的字体，如果有其它语言的基础的话就可以明白，这类似方法的重载。

0 0