@face-font调用服务器字体


<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 worldp>
    <p class="test1">hello worldp>
    <p class="test2">hello worldp>
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一样的话,就可变成相应的字体,如果有其它语言的基础的话就可以明白,这类似方法的重载。

你可能感兴趣的:(css)