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

【问题标题】：How can I use custom fonts on a website? [duplicate]如何在网站上使用自定义字体？ [复制]
【发布时间】：2012-11-15 03:07:36
【问题描述】：

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

这个问题有解决办法吗？

【问题讨论】：

标签： html fonts

【解决方案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 */
}

【讨论】：

【解决方案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');
}

【讨论】：