Question

我在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');}

此外，在下面的代码中使用这些font-family时，结果也是相同的。

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

Answer 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”开头的地点（“需要拥有这些字体的正确网址。每一个字体。所以，你需要制作它：

@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位于同一服务器上，我不知道这是否也适用于同一个子域：这意味着如果它需要在{{3 }}

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

为了做到这一点，你需要选择一个元素，例如我要选择......

.entry { font-family: calibri; }

..并将font-family更改为：

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

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

@ font-face无效（结果字体与原始字体不同）

1 个答案: