html中引用外部字体

这里用 @font-face来引用外部字体

    <style>
        @font-face {
	        font-family: FZXiaoBiaoSong-B05S;
	        src: url("/fonts/FZXiaoBiaoSong-B05S.ttf");
        }       
    </style>

字体文件放在static下fonts文件夹里

 

下面要引用该字体,直接用FZXiaoBiaoSong-B05S即可

font-family: FZXiaoBiaoSong-B05S;

例如:

<span id="date" style="font-family: FZXiaoBiaoSong-B05S;font-size: 25px;"></span>

Windows下查看本机的字体资源:

磁盘地址: C:\Windows\Fonts

### 如何在HTML中正确引入和使用外部字体 要在HTML中正确引入并使用外部字体,通常会借助CSS中的`@font-face`规则来定义自定义字体。以下是具体方法: #### 使用 `@font-face` 定义字体 通过 CSS 的 `@font-face` 规则可以加载外部字体文件,并将其应用于 HTML 元素。以下是一个完整的例子[^1]: ```css /* 在样式表中定义字体 */ @font-face { font-family: 'MyCustomFont'; /* 自定义字体名称 */ src: url('https://example.com/fonts/mycustomfont.woff2') format('woff2'), url('https://example.com/fonts/mycustomfont.woff') format('woff'); /* 字体文件路径 */ } ``` 在此示例中,`src` 属性指定了字体文件的位置以及其格式。支持多种字体格式(如 `.woff`, `.ttf`, 和 `.otf`),推荐优先使用 `.woff2` 格式因为它具有更好的压缩效果。 #### 将字体应用到HTML元素 一旦定义好字体后,就可以像使用其他标准字体一样,在任何选择器中调用它: ```css body { font-family: 'MyCustomFont', sans-serif; /* 应用自定义字体 */ } ``` 如果需要针对特定的标签或者类名设置不同的字体,则可以在相应的选择器里指定该属性。 #### 利用Google Fonts等服务简化流程 另一种更简便的方式是从 Google Fonts 或类似的在线平台获取已经托管好的字体资源。只需复制他们提供的链接代码片段插入至 `<head>` 部分即可快速集成所需字体。 例如要添加 Roboto 字体: ```html <link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet"> ``` 之后可以直接在 css 文件里面引用这个字体族名而无需额外声明 @font-face : ```css p{ font-family:'Roboto',sans-serif; } ``` 以上就是关于如何在HTML文档当中成功嵌入外链字体的主要方式介绍。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

像向日葵一样~

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值