我们在使用PS、PPT或在使用其他设计编辑软件的时候为了能够达到自己的需求，总会在网上寻找一些好看的字体，那么你有没有想过将这些好看的字体运用到自己的网页中呢？
下载字体文件
我们一般在PS或者PPT中使用的字体大部分是在网上找一些资源网站来下载以 ttf 后缀结尾的字体安装文件，安装之后重启PS就能发现刚刚安装过的字体了。在前端开发中也是一样的，不同的是前者是需要将字体安装到本地，而如果你想让浏览你网页的所有人都能看到你安装的字体 就需要将以 ttf 结尾的文件放到服务器中 啦！
在这里给大家推荐一个字体下载的网站：字体下载_免费字体下载_字体下载大全 - 第一PPT (1ppt.com)
引入字体
下载完成后利用 FTP 工具或 宝塔 等将 ttf 文件移动到服务器中.
这里我用的 web服务器 是 tomcat ，在 webapps 目录下新建一个名为 TEST 的文件夹，里面有如下内容：
static 文件夹下的 AliH.ttf 是在网上下载的字体文件，为阿里的汉仪体.（不要随便用于商用噢，该字体仅限阿里内部使用，这里只用来做测试）
html 和 css 文件的内容如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>TEST</title>
</head>
<body>
<h1>中国制造 阿里汉仪体</h1>
</body>
</html>
@font-face {
font-family: 'ALiH';
/* 这里是你自己给起的名字, 尽量用英文 */
src: url('./static/ALiH.ttf');
/* ttf文件的路径, 可以用相对路径 */
}
h1{
font-family: 'ALiH';
/* 为 h1 标签引用该字体*/
}
