网站开发中如何给您的网站添加自定义字体

下面介绍的@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;

字体粗细：正常;

字体样式：正常;

}