下面介绍的@font CSS是网站添加自定义字体的最常见方法。
第1步:下载字体
找到要在网站上使用的自定义字体,然后下载 TrueType 字体文件格式 (.ttf)。您也可以下载 OpenType 字体格式 (.otf)
第2步:创建用于交叉浏览的 Web 字体工具包
将您的.ttf或.otf文件上传到网页字体生成器,然后下载您的网页字体工具包。
第3步:将字体文件上传到您的网站
使用您的 FTP 或文件管理器,将 Web 字体工具包中找到的所有字体文件上传到您的网站。 通常,此工具包将包括多个文件扩展名,例如 (.eot)、(.woff)、(.woff2)、(.ttf) 和 (.svg)。
您的工具包还将包括一个级联样式表 (.css),您需要在步骤 4 中更新和上传该样式表。
*此步骤将根据您网站的构建和托管方式而有很大差异。
第4步:更新并上传您的 CSS 文件
在文本编辑器(如文本编辑、记事本或 Sublime)中打开 CSS 文件。
将现有源 URL 替换为通过上传每个文件创建的新 URL。
默认情况下,源 URL 位置在下载的 Web 字体工具包中设置。它需要替换为服务器上的位置。
下面是一个快速示例:
更新前:
@font面 {
字体系列: “自定义字体”;
src: url(“CustomFont.eot”);
src: url(“CustomFont.woff”) format(“woff”),url(“CustomFont.otf”) format(“opentype”),
url(“CustomFont.svg#filename”) format(“svg”);
}
更新后:
@font面 {
字体系列: “自定义字体”;
src: url(“https://yoursite.com/css/fonts/CustomFont.eot”);src: url(“https://yoursite.com/css/fonts/CustomFont.woff”) format(“woff”),url(“https://yoursite.com/css/fonts/CustomFont.otf”) format(“opentype”),
url(“https://yoursite.com/css/fonts/CustomFont.svg#filename”) format(“svg”);
}
更新CSS文件后,您需要将其上传到您的网站(服务器)。
第5步:在 CSS 声明中使用自定义字体
现在,级联样式表和字体文件已上载到服务器,可以开始在 CSS 声明中使用自定义字体来帮助改进 HTML 的外观。
这可以通过多种方式完成,包括将站点范围的声明添加到主 CSS 文件。
下面是一个快速示例:
h1 {
font-family: 'CustomFont', Arial, sans-serif;
字体粗细:正常;
字体样式:正常;
}