Question

预先安装了2种特定字体。它们在Chrome中呈现良好，但在Firefox中则不行。所以我使用@font-face包含字体，以便下载它们。

CSS：

@font-face
{
  font-family:Elephant;
  src:url('/Styles/Fonts/elephant.ttf');

  font-family:Harrington;
  src:url('/Styles/Fonts/Harrington.ttf');
}

.title
{
  font-family:Elephant;
}
.title2
{
  font-family:Harrington;
}

它们仍无法在Firefox中运行。我需要做什么？

Answer 1

你的下载字体链接应该是这样的：

@font-face
{
    font-family: 'elephant';
    src: url('/Styles/Fonts/elephant.eot?#') format('eot'), /* IE6–8 */
    url('/Styles/Fonts/elephant.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
    url('/Styles/Fonts/elephant.ttf') format('truetype'); /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */
}

您可以使用Web Font Ganarator将字体转换为Woff和eot以及svg格式

Answer 2

主要问题是，您需要为导入/下载以在CSS中使用的每种字体设置单独的@font-face规则：

@font-face {
  font-family: "Elephant";
  src: url("/Styles/Fonts/elephant.ttf");
}

@font-face {
  font-family: "Harrington";
  src: url("/Styles/Fonts/Harrington.ttf");
}

Answer 3

在Firefox上，你应该这样写：

@font-face {
font-family: ‘FONT’;
src: url(‘FONT.eot’);
src: url(‘FONT.eot?#iefix’) format(‘embedded-opentype’),
url(‘FONT.woff’) format(‘woff’),
url(‘FONT.ttf’) format(‘truetype’),
url(‘FONT.svg#FONT’) format(‘svg’);
font-weight: normal;
font-style: normal;

}

FONT是你的字体，大象或哈灵顿。

CSS - 无法使用下载的字体

3 个答案: