css导入外部字体

最新推荐文章于 2025-03-17 00:11:21 发布

我怎么天天吃得饱

最新推荐文章于 2025-03-17 00:11:21 发布

阅读量262

点赞数 3

文章标签： css 前端

本文链接：https://blog.youkuaiyun.com/oolppp/article/details/145816409

版权

应用了字体样式，但用户电脑却没有安装该字体时，样式没有生效

html代码

<body>
    <p class="my-font">这是外部导入的字体</p>
</body>

css代码

.my-font {
            font-family: 'my-font';
            font-size: 5em;
        }

此时发现并没有样式

应用web字体：用户电脑没有安装该字体，浏览器强制让用户下载该字体

css代码

<style>
        /*
            应用web字体：用户电脑没有安装该字体，浏览器强制让用户下载该字体
        */
        @font-face {
            font-family: 'my-font'; /*使用@font-face 指令制作一个字体*/
            src: url('./font/我的字体.ttf'); /*指定字体文件的路径*/
        }
        .my-font {
            font-family: 'my-font';
            font-size: 5em;
        }
    </style>