如何在网站上使用自定义字体？ [复制]

Posted 2023-03-13

【中文标题】如何在网站上使用自定义字体？ [复制]

【英文标题】：How can I use custom fonts on a website? [duplicate]

【发布时间】：2012-11-15 03:07:36

【问题描述】：

为了让我的网站看起来不错，我需要使用自定义字体，特别是 Thonburi-Bold。问题是 - 除非用户安装了字体，否则字体不会显示。它也不显示在 Firefox 中。

这个问题有解决办法吗？

【问题讨论】：

围绕这个话题有几个老问题。其中一些已经过时，但时间花在改进答案上比给重复的简短答案更有效。 （对这个问题的任何真正简短的回答往往是错误的或基本上不完整。）

【参考方案1】：

是的，有办法。它在 CSS 中称为自定义字体。您的 CSS 需要修改，并且您需要将这些字体上传到您的网站。

为此所需的 CSS 是：

@font-face 
     font-family: Thonburi-Bold;
     src: url('pathway/Thonburi-Bold.otf'); 

【参考方案2】：

您必须像这样在样式表中导入字体：

@font-face
    font-family: "Thonburi-Bold";
    src: url('Thonburi-Bold.ttf'),
    url('Thonburi-Bold.eot'); /* IE */

【讨论】：

IE 评论+1

它似乎也适用于src: url('Thonburi-Bold.otf')

【参考方案3】：

您可以使用 CSS3 font-face 或 webfonts

@font-face 用法

@font-face 
   font-family: Delicious; 
   src: url('Delicious-Roman.otf');
 

网络字体

看看 Google Webfonts，http://www.google.com/webfonts

【参考方案4】：

首先，您必须将字体作为 .otf 或 .ttf 放在服务器上的某个位置。

然后使用 CSS 像这样声明新的字体系列：

@font-face 
    font-family: MyFont;
    src: url('pathway/myfont.otf'); 
    

如果将文档链接到声明字体系列的 CSS 文件，则可以像使用任何其他字体一样使用该字体。

【参考方案5】：

CSS 让您可以在您的网站上使用自定义字体、可下载字体。您可以下载您喜欢的字体，比如myfont.ttf，然后将其上传到托管您的博客或网站的远程服务器。

@font-face 
    font-family: myfont;
    src: url('myfont.ttf');