DIV+CSS外部字体引用

最新推荐文章于 2025-09-11 10:42:34 发布

转载最新推荐文章于 2025-09-11 10:42:34 发布 · 98 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/flay/p/3865204.html

文章标签：

#xhtml

本文介绍了一种使用自定义字体的方法，并展示了如何通过不同HTML标签应用这些字体。文章提供了具体的代码示例，包括引入字体文件及设置不同元素的字体样式。

注意：

　　由于各个浏览器兼容问题大家还是少用这个，下面是具体的使用方法和效果截图：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title></title>
    <style type="text/css">
        *{padding:0px; margin:0px; font-size:50px;}
        @font-face { font-family: test; src: url('alpha_echo.ttf'); } 
        @font-face { font-family: test1; src: url('Almendra-Bold.otf'); } 
        @font-face { font-family: test2; src: url('MFYueHei_Noncommercial-Regular.otf'); } 
        @font-face { font-family: test3; src: url('Ruthie-Regular-OTF.otf'); } 
        p{font-family: "test";}
        b{font-family: "test1";}
        span{font-family: "test2";}
        strong{font-family: "test3";}
    </style>
</head>
<body>

    <p style="font-size:40px">asdfasdfasdf白增飞</p>
    <b>adfasdfasdf</b><br />
    <span>白增飞 demo Font test</span>
    <br />
    <strong>baizengfei 白增飞</strong>
</body>
</html>