在页面上显示服务器端的字体-优快云博客

本文介绍如何使用HTML5和CSS3技术在网页中应用特定字体，包括从服务器加载字体及利用本地字体资源的方法，并展示了如何通过CSS属性调整文本样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>在页面上显示服务器端的字体</title>
    <style>
        @font-face {
            font-family: webfont;
            src: url(qtgg.otf);
        }
        @font-face {
            font-family: webfont;
            font-style: italic;
            src: url(jpzk.otf);
        }
        h1{
            font-family: webfont;
        }
        h2{
            font-family: webfont;
            font-style: italic;
        }
</style>
</head>
<body>
<h1>Hello Html5  Css3</h1>
<h2>Hello Html5  Css3</h2>
</body>
</html>

根据字体样式匹配服务端字体

效果

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>在页面上显示服务器端的字体</title>
    <style>
        /*调用本地字库*/
        @font-face{
            font-family:Arial;
            src:local('Arial');
        }
        h1{
            font-family: Arial;
            font-variant: small-caps;
        }
    </style>
</head>
<body>
<h1>在页面上显示服务器端的字体</h1>
<h1>Hello Html5  Css3 QPqp</h1>
</body>
</html>

设置文本大小写

font-variant:
normal       使用浏览器默认值
small-caps   使用小型大写字母
inherit      从父元素继承

转载于:https://www.cnblogs.com/qpnets/p/8259600.html