@face-font调用服务器字体

2024-04-27 15:09:07

字体：大中小

来源：转载

供稿：网友

<!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一样的话，就可变成相应的字体，如果有其它语言的基础的话就可以明白，这类似方法的重载。

上一篇：NodeJS的模块机制

下一篇：css使用中遇到的小问题