-1

我在我的 tumblr 主题中使用 @font-face 语法。我安装的字体是 Doctor Soos Bold 和 Doctor Soos Light 使用代码：

@font-face {
font-family: 'doctor_soos_boldbold';
src: url('doctor_soos_bold_2.1-webfont.eot');
src: url('doctor_soos_bold_2.1-webfont.eot?#iefix') format('embedded-opentype'),
     url('doctor_soos_bold_2.1-webfont.woff') format('woff'),
     url('doctor_soos_bold_2.1-webfont.ttf') format('truetype'),
     url('doctor_soos_bold_2.1-webfont.svg#doctor_soos_boldbold') format('svg');
font-weight: normal;
font-style: normal;}

@font-face {
font-family: 'doctor_soos_lightregular';
src: url('doctor_soos_light_1.1-webfont.eot');
src: url('doctor_soos_light_1.1-webfont.eot?#iefix') format('embedded-opentype'),
     url('doctor_soos_light_1.1-webfont.woff') format('woff'),
     url('doctor_soos_light_1.1-webfont.ttf') format('truetype'),
     url('doctor_soos_light_1.1-webfont.svg#doctor_soos_lightregular') format('svg');
font-weight: normal;
font-style: normal;}

问题是每当我使用这些字体时，生成的字体与原始字体不同。可以在这里看到差异http://celestetwit.tumblr.com/private/61000332979/tumblr_mszx4vL7iw1sdolt8

代码当然放在样式元素中。但是因为我对 CSS 了解不多，也不知道我使用的预制自定义 tumblr 主题是否影响了上面的代码，所以不知道是哪一部分出错了。请帮我解决这个问题。我正在使用的 tumblr 主题代码可以在这里找到http://pastebin.com/UqNL7X89请查看它以供参考。

我还在 tumblr 中上传了字体并使用了下面的代码，但我仍然得到相同的结果。

@font-face {font-family: "doctorsoosbold"; src: url('http://static.tumblr.com/qvrmxer/a06msz0xg/doctor_soos_bold_2.1.ttf');}

@font-face {font-family: "doctorsooslight"; src: url('http://static.tumblr.com/qvrmxer/TpImsz0yf/doctor_soos_light_1.1.ttf');}

此外，在下面的代码中使用这些字体系列时，结果也是一样的。

.entry h1{font-family: doctorsoosbold; text-transform: uppercase; font-size: 15px; font-weight: 20px; letter-spacing: 1px;}
4

1 回答 1

0

你在那里有两个问题。

  1. 您已经声明了字体“doctor_soos_boldbold”和“doctor_soos_lightregular”，但您没有指定正确的路径，至少，我相信您在当前目录中没有这些字体。您需要指定字体的正确位置。

你在哪里：

@font-face {
    font-family: 'doctor_soos_boldbold';
    src: url('doctor_soos_bold_2.1-webfont.eot');
    src: url('doctor_soos_bold_2.1-webfont.eot?#iefix') format('embedded-opentype'),
         url('doctor_soos_bold_2.1-webfont.woff') format('woff'),
         url('doctor_soos_bold_2.1-webfont.ttf') format('truetype'),
         url('doctor_soos_bold_2.1-webfont.svg#doctor_soos_boldbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

每个以“url(”开头的位置都需要有这些字体的正确 URL。每一个。所以，你需要做到：

@font-face {
    font-family: 'doctor_soos_boldbold';
    src: url('http://static.tumblr.com/qvrmxer/a06msz0xg/doctor_soos_bold_2.1.eot');
    src: url('http://static.tumblr.com/qvrmxer/a06msz0xg/doctor_soos_bold_2.1.eot?#iefix') format('embedded-opentype'),
         url('http://static.tumblr.com/qvrmxer/a06msz0xg/doctor_soos_bold_2.1.woff') format('woff'),
         url('http://static.tumblr.com/qvrmxer/a06msz0xg/doctor_soos_bold_2.1.ttf') format('truetype'),
         url('http://static.tumblr.com/qvrmxer/a06msz0xg/doctor_soos_bold_2.1.svg#doctor_soos_boldbold') format('svg');
    font-weight: normal;
    font-style: normal;
}

您需要有 .eot 文件、.woff、.ttf 和 .svg，所有这些文件名。对浅色字体做同样的事情，所有 4 个文件也一样。

请注意，Firefox 要求字体与请求的 CSS 位于同一服务器上，我不知道这是否也适用于同一子域：这意味着如果它需要位于http://celestetwit 上，它可能无法在 Firefox 中运行。 tumblr.com

  1. 您也没有将这些字体应用于页面上的任何元素。

为此，您需要选择一个元素，例如我要选择...

.entry { font-family: calibri; }

..并通过将字体系列更改为：

.entry { font-family: 'doctor_soos_lightregular', Arial, Helvetica, sans-serif; }

.. 您将能够看到更新后的字体（如上所示，有备用字体是个好主意。修复了 Windows XP/IE 8 中与选择有关的错误。）

于 2013-09-12T07:25:54.203 回答