• 前言
  • 一、下载字体文件（.ttf文件）
  • 二、在html中引入.ttf字体文件
  • 三、引入字体文件后就可以将该字体应用到你的文本上了
  • 完整代码示例


前言

html中可以直接使用的字体很多，足以满足我们大部分需求，但在一些特殊情况下，我们需要使用特殊的字体，本文介绍了如何在你的html网页中使用特殊字体

不多BB，先上效果图：

HTML5艺术字 html中艺术字怎么弄_简单使用

接下来就教大家如何使用特殊字体

一、下载字体文件（.ttf文件）

百度搜索你想要的特殊字体的.ttf文件并把它下载到一个你能记住的目录中，例如我把华文彩云.ttf(记得解压并拿出.ttf文件)下载进了C盘下的font目录：


HTML5艺术字 html中艺术字怎么弄_html_02



二、在html中引入.ttf字体文件

下载完.ttf字体文件后你需要告诉html你的.ttf字体文件在哪，这样html才能找到并使用它，你需要做的是在你的html文件的<head>标签下的<style>标签内加入类似这样的代码：

@font-face {
	font-family: 华文彩云;
	src: url(C:/font/华文彩云.ttf);
}

说明：以上的font-family值为字体名，src的值为你的.ttf字体文件的路径。

三、引入字体文件后就可以将该字体应用到你的文本上了

将文本加上样式style="font-family: 字体名;"即可，如：

<div style="font-family: 华文彩云;">
	只有如此飘逸的字体才配得上如此帅气的我
</div>

完整代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊字体</title>
    <style>
        @font-face {
            font-family: 华文彩云;
            src: url(C:/font/华文彩云.ttf);
        }
    </style>
</head>
<body>
    <div style="font-family: 华文彩云;">
        只有如此飘逸的字体才配得上如此帅气的我
    </div>
    <div style="font-family: 华文彩云;">
        只有如此飘逸的字体才配得上如此帅气的我
    </div>
    <div style="font-family: 华文彩云;">
        只有如此飘逸的字体才配得上如此帅气的我
    </div>
</body>
</html>

以上就是今天要讲的内容，本文仅仅介绍了字体样式的简单使用