如何在Windows系统中将您喜欢的字体应用到您自己的网站上

2016.02.29

• Web系统开发

1

1,527

这是开发团队的山田。

近年来，CSS框架发展得非常成熟，即使像我这样没有任何设计知识的人也能创建一个看起来不错的网站。
但是，如果你不知道如何有效地使用它们，你的网站最终往往会和其他网站看起来千篇一律。

这次，我将向您展示如何在您自己的网站上使用您在 Windows 系统中最喜欢的字体，以增添一些个性！

*请务必查看您使用的字体的许可协议！*

你需要什么

首先，要将 Windows 字体转换为 Web 字体，请安装一款名为 Woff Converter 的免费软件。您可以
从以下网站下载并运行“woffconv230.msi”。该
软件选项不多，只需同意服务条款并选择安装位置即可。

Windows Forest WOFF 转换器 （外部链接）

在 Windows 系统中查找字体文件

找到您在 Windows 系统中安装的免费字体。
字体文件位于“控制面板中的‘自定义桌面字体’”中。（适用于 Windows 10）
只需在文件资源管理器的地址栏中输入此路径即可！

在文件资源管理器的地址栏中输入上述路径，即可找到字体文件的位置，让
我们从中选择所需的字体。

使用 Woff 转换器转换字体

找到字体文件后，就可以将其转换为适用于网页的字体文件，即“woff”格式。
启动之前安装的“woff转换器”，
然后将选定的字体文件拖放到“要转换的文件”文本框中。

转换后的文件将根据原文件名自动生成文件名，因此您无需手动输入任何内容。
或者，您也可以直接设置输出文件夹。

接下来，勾选“创建EOT文件”复选框。
根据您的需要选择其他选项。

完成上述步骤后，点击“开始转换”！

此时将出现一个名为“指定字体”的对话框，请选择最适合您需求的字体。

如果文件生成成功，转换成功完成将显示

使用 CSS 加载创建的字体。

最后，让我们加载使用 CSS 创建的字体文件，并将其实际反映在网站上。

首先，请将您刚刚创建的三个文件——“〇〇.woff”、“〇〇.eot”和“〇〇.ttf”——上传到服务器。
*“〇〇”是您创建字体时指定的名称，或者如果字体是自动生成的，则为原始字体名称。

上传完成后，使用以下 CSS 加载字体文件。

@font-face { font-family: "myFont";w src: url("[上传路径]/〇〇.woff") format('woff'), url("[上传路径]/〇〇.eot") format('eot'), url("[上传路径]/〇〇.ttf") format('truetype'); } .myFont{font-family: "myFont";}

*请根据实际情况更改文件名中的“〇〇”部分。

现在您可以使用创建的字体文件了！
您只需在 HTML 代码中使用已加载的字体文件即可。

<div class="myFont">你想更改字体的文本</div>

实际应用到这个博客上，效果是这样的！

概括

它怎么样？

使用这种方法，您只需稍加努力即可让您的网站脱颖而出！
此外，如果您应用此方法，甚至可以将您在电脑上创建的自定义字符作为自定义字体导入到您的网站，这样即使
由于系统限制而必须使用自定义字符，也能轻松应对！

下次见！

如果您想咨询开发专业人士

在 Beyond，我们将我们在系统开发方面的丰富经验、技术和专业知识与开源软件技术和云技术（如 AWS）相结合，以可靠的质量和卓越的性价比提供网络系统的合同开发服务。

我们还负责服务器端/后端开发和专有 API 协作开发，充分利用我们的技术和专业知识，为大规模、高负载的游戏、应用程序和数字内容构建和运营 Web 系统/应用程序基础设施。

如果您在开发项目方面遇到任何问题，请访问以下网站。

● Web系统开发
● 服务器端开发（API/数据库）

如果您觉得这篇文章对您有帮助，请点个“赞”！

1

加载中...

1

1,527