在您自己的网站上使用您最喜欢的字体！

2016.02.29

• 网络系统开发

0

1,228

我是开发团队的山田。

在过去的几年里，CSS 框架已经得到了改进，即使像我这样没有任何设计知识的人现在也可以创建类似的网站。
但是，如果您不知道如何正确使用它，其设计往往看起来与其他网站相似。

这次，我将介绍如何在自己的网站上使用您最喜欢的Windows中使用的字体，赋予它一点个性！

*请务必检查您使用的字体的许可证！ *

需要准备什么

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

Window公司Woff转换器（外部链接）

在 Windows 上查找字体文件

查找您在 Windows 上安装的免费字体。
该字体文件位于
“控制面板桌面自定义字体” （对于 Windows 10）只需在资源管理器的地址栏中输入此内容即可开始！

在资源管理器的地址栏中输入上述路径就可以移动到字体文件所在的位置，所以
这次我们就从这里选择想要的字体。

尝试使用 Woff 转换器转换字体

找到字体文件后，就可以将其转换为字体文件“woff”以供 Web 使用。
启动您之前安装的“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>

这就是实际适应这个博客时的样子！

概括

它怎么样？

通过使用这种方法，您可以毫不费力地使您的网站脱颖而出！
此外，如果您应用它，您可以将在您的 PC 上创建的个人姓名字符加载为自定义字符字体，因此
您确实想在系统上使用自定义字符！当您需要时我们也可以为您提供帮助！

再见！

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

0

加载中...

0

1,228