html 怎么使用自定义字体？

HongYingClub

于 2024-05-12 22:21:16 发布

阅读量316

点赞数 6

分类专栏：杂谈尬聊文章标签：前端

本文链接：https://blog.csdn.net/weixin_43906282/article/details/138770045

版权

杂谈尬聊专栏收录该内容

64 篇文章 0 订阅

订阅专栏

在HTML中使用自定义字体，你通常需要遵循以下步骤：

获取字体文件：首先，你需要有自定义字体的文件。这通常是.ttf (TrueType Font)、.woff (Web Open Font Format) 或 .woff2 格式的文件。.woff 和 .woff2 格式是专为网页设计的，因为它们更小、加载更快，并且支持更多字体特性。
将字体文件上传到服务器：将字体文件上传到你的网站服务器上，通常放在一个容易访问的文件夹中，例如 /fonts/。
在CSS中引用字体：使用CSS的@font-face规则来引用字体文件。这个规则允许你定义一个新的字体名称，并将其与字体文件关联起来。然后，你就可以在CSS的任何地方使用这个新定义的字体名称了。

下面是一个简单的示例：

<!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: 'MyCustomFont';  /* 定义一个新的字体名称 */  
            src: url('fonts/MyCustomFont.woff2') format('woff2'),  /* 指定字体文件的URL和格式 */  
                 url('fonts/MyCustomFont.woff') format('woff');  /* 提供备选格式，以便在不支持woff2的浏览器中回退 */  
            font-weight: normal;  /* 设置字体的粗细 */  
            font-style: normal;  /* 设置字体的样式（如斜体） */  
        }  
  
        body {  
            font-family: 'MyCustomFont', sans-serif;  /* 在body元素中使用自定义字体 */  
        }  
    </style>  
</head>  
<body>  
    <h1>Hello, World!</h1>  
    <p>这是一个使用自定义字体的段落。</p>  
</body>  
</html>

注意：

确保字体文件的URL是正确的，并且字体文件是可访问的。
如果你的网站使用了HTTPS，那么字体文件的URL也应该是HTTPS的，以避免混合内容错误。
提供备选字体格式（如woff和woff2）是一个好习惯，以确保你的网站在尽可能多的浏览器中都能正常工作。
使用font-weight和font-style属性来定义字体的不同变体（如粗体、斜体等）。如果你的字体有多个变体，你可能需要为每个变体定义一个@font-face规则。