如何将此自定义字体上载到静态html页面

Question

这里的html总新手。
我希望从以下任何一种字体中加入： https://andrewsonline.co.uk/content/fonts/
进入一个静态的github页面我正在建立一个网站 我看到这些字体的css代码在这里：
https://andrewsonline.co.uk/content/fonts/fonts.css
我只需要将其复制并粘贴到我的HTML中吗？ 我在哪里放置eot，woff，tff和svg文件？

谢谢你的帮助

Answer 1

无论哪里放置字体，只要它们被正确引用：

• 前缀/相对于根目录。
• 前缀./相对于工作目录。
• 前缀../相对于父目录。

只需确保在@font-face中定义字体，在font-family中指定所需的名称，并在src属性中指定字体的网址。您需要链接的唯一字体网址是 .woff （其他字体网址只是特定于浏览器的替代品或过时的扩展程序）。

通常，您只需使用类似于以下内容的内容：

@font-face {
    font-family: externalFont;
    src: url(/fonts/GT-Walsheim-Pro-Light.woff);
}

div {
    font-family: externalFont;
}

<div>Stylish</div>

请注意，Andrew的Online已设置“No Access-Control-Allow-Origin”，这意味着如果您要直接链接到其字体，则CORS策略将阻止字体包含。您需要下载他们的字体，然后链接到本地副本。

希望这有帮助！ ：）