如何在网站上使用自定义字体？

Question

为了让我的网站看起来好看，我需要使用自定义字体，具体来说是Thonburi-Bold。问题是，除非用户已经安装了这种字体，否则字体不会显示出来。并且在Firefox中也无法显示。

有没有解决这个问题的方法？

- James Logan

---

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

Answer 1

你需要像这样在你的样式表中导入字体：

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

- Zencode.dk

---

好的，我会尽力进行翻译。以下是需要翻译的内容：+1 for the IE comment - Steve Lorimer

似乎使用 src: url('Thonburi-Bold.otf') 也可以工作。 - steven

Answer 2

你可以使用CSS3的font-face或者webfonts。 @font-face的使用方法。

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

Webfonts

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

- Muthu Kumaran

Answer 3

有一种方法可以实现，它被称为CSS中的自定义字体。您需要修改CSS，并将这些字体上传到您的网站。

此操作所需的CSS代码如下：

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

- Dorvalla

Answer 4

CSS可以让你在网站上使用自定义字体和可下载字体。你可以下载你喜欢的字体，比方说myfont.ttf，并上传到你的远程服务器上，即你的博客或者网站托管的地方。

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

- hermann

Answer 5

首先，您需要将字体文件以.otf或.ttf格式放置在服务器上的某个位置。

然后使用CSS声明新的字体系列，如下所示：

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

如果您将文档链接到声明字体族的CSS文件中，您就可以像使用其他字体一样使用该字体。

- Simon Carlson