AI工程软件系统

在HTML中调用本地字体

字数统计: 326字   |   阅读时长: 1分

摘要: 本文是在 HTML 中调用本地字体的代码模板

【对数据分析、人工智能、金融科技、风控服务感兴趣的同学，欢迎关注我哈，阅读更多原创文章】
我的网站：潮汐朝夕的生活实验室
我的公众号：潮汐朝夕
我的知乎：潮汐朝夕
我的github：FennelDumplings
我的leetcode：FennelDumplings

代码模板

  • 定义字体
1
2
3
4
@font-face{
    font-family: Windows自带仿宋;
    src: url("download/resource/字体库/simfang.ttf");
}
  • 使用字体
1
2
3
4
5
.box{
    font-family: 'Windows自带仿宋';
}

<div class="box">Windows自带仿宋</div>
  • 完整代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>字体测试</title>
    <style>
        @font-face{
            font-family: Windows自带仿宋;
            src: url("download/resource/字体库/simfang.ttf");
        }
        .box{
            font-family: 'Windows自带仿宋';
        }
    </style>
</head>
<body>
    <div>未设置本地字体</div>
    <div class="box">Windows自带仿宋</div>
</body>
</html>

效果展示

前面完整代码的效果

字体测试
未设置本地字体
Windows自带仿宋
Share