web字体

最新推荐文章于 2025-05-10 12:16:35 发布

戴森球399

最新推荐文章于 2025-05-10 12:16:35 发布

阅读量124

点赞数 3

分类专栏：前端文章标签：前端 html5

本文链接：https://blog.csdn.net/2201_75919511/article/details/133997973

版权

前端专栏收录该内容

3 篇文章

订阅专栏

本文介绍了如何在网页中使用web字体，包括通过`@font-face`指定外部字体地址和阿里在线定制字体的高兼容性语法。同时讨论了完整字体文件的大小问题以及针对不同浏览器的兼容处理。

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

2023.10.23

web字体

基本用法

可以通过@font-face指定字体的具体地址，浏览器会自动下载该字体，这样就不依赖电脑上的字体了

方法一，引用外部字体，语法（简写形式）

<style>
        /* 引入外部字体*/
        @font-face {
            font-family: "戴森球";
            src: url("./font1/方正手迹.ttf");
        }
</style>

方法二，阿里定制字体语法（高兼容性）阿里在线定制字体

<style>
         /* https://www.iconfont.cn/webfont 阿里在线定制字体 */
        @font-face {
        font-family: "webfont";
        font-display: swap;
        src: url('./font2/webfont.eot'); /* IE9 */
        src: url('./font2/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('./font2/webfont.woff2') format('woff2'),
        url('./font2/webfont.woff') format('woff'), /* chrome、firefox */
        url('./font2/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('./font2/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
        }
</style>

方法一中的字体文件很大，使用完整字体文件不现实，通常使用阿里定制个性化字体对某几个文字单独定制，文字所占空间很小。两种方法都需要对浏览器进行兼容性处理

字体效果如下图
在这里插入图片描述

完整代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>web字体</title>
    <style>
        /* 引入外部字体*/
        @font-face {
            font-family: "戴森球";
            src: url("./font1/方正手迹.ttf");
        }
         /* https://www.iconfont.cn/webfont 阿里在线定制字体 */
        @font-face {
        font-family: "webfont";
        font-display: swap;
        src: url('./font2/webfont.eot'); /* IE9 */
        src: url('./font2/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('./font2/webfont.woff2') format('woff2'),
        url('./font2/webfont.woff') format('woff'), /* chrome、firefox */
        url('./font2/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('./font2/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
        }
        .t1{
            font-size: 20px;
            font-family: "戴森球";
        }
        .t2{
            font-size: 20px;
            font-family: "webfont";
        }
    </style>
</head>
<body>
    <div class="t1">春风得意马蹄疾，不信人间有别离</div>
    <div class="t2">如果心中都是质疑与恨，就少了空间去爱和肯定</div>
</body>
</html>