CSS样式的@font-face

听海边涛声

已于 2024-05-24 09:40:37 修改

阅读量209

点赞数 7

文章标签： css 前端

于 2024-05-24 09:38:43 首次发布

本文链接：https://blog.csdn.net/panghuangang/article/details/139163655

版权

https://developer.mozilla.org/zh-CN/docs/Web/CSS/@font-face

它允许网页开发者为其网页指定在线字体。通过这种作者自备字体的方式，@font-face 可以消除对用户电脑字体的依赖。

取值：
font-family、src、font-variant、font-stretch、font-weight、font-style、unicode-range。

示例：

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer" />
    <title>验证</title>
    <!-- <link rel="stylesheet" href="`//at.alicdn.com/t/c/font_4559324_ihtvb4tr0pj.css"> -->
    <style>
        @font-face {
            font-family: "iconfont";
            /* Project id 4559324 */
            src: url('//at.alicdn.com/t/c/font_4559324_ihtvb4tr0pj.woff2?t=1716509665524') format('woff2'),
                url('//at.alicdn.com/t/c/font_4559324_ihtvb4tr0pj.woff?t=1716509665524') format('woff'),
                url('//at.alicdn.com/t/c/font_4559324_ihtvb4tr0pj.ttf?t=1716509665524') format('truetype');
        }

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 16px;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }

        .icon-weixin:before {
            content: "\e60e";
        }
    </style>
</head>

<body>
    <p><i class="iconfont icon-weixin"></i></p>
</body>

</html>