如何将这种自定义字体上传到静态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属性中指定font-family的URL。 您需要链接的唯一字体URL是.woff （其他仅是特定于浏览器的替代字体或过时的扩展名）。

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

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

 <div>Stylish</div> 

请注意，Andrew's Online已设置“禁止访问-允许-起源”，这意味着，如果您直接链接到字体，则CORS策略将阻止字体包含。 您需要下载其字体，然后链接到本地副本。

希望这可以帮助！ :)