如何將這種自定義字體上傳到靜態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策略將阻止字體包含。 您需要下載其字體，然后鏈接到本地副本。

希望這可以幫助！ :)