Question

我的任务是使用HTML5和CSS3制作电影海报。在Internet Explorer 10上，.ttf字体效果很好，海报看起来很棒。但是，在Chrome或Safari上运行 index.html 文件无法正确呈现字体。

我问我的教授为什么会这样，他说不是所有操作系统和浏览器都使用相同的字体文件类型，我需要为多个浏览器生成多种类型。他建议我使用FontSquirrel。

我尝试上传文件 Starjedi.ttf ，但收到了损坏的文件错误。然后我尝试使用Transfonter，它成功地给了我一个.zip包，但是看着测试页面，字体无法正确呈现。我做错了什么，或者我的字体无法正常转换？

这是我在CSS文件中使用的代码：

@font-face {
    font-family: "logo";
    src: url("../fonts/logo/Starjedi.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

任何帮助将不胜感激！

编辑：在@Stephen_Thomas的帮助下，我设法让转换工作正常。转换的test.html在Chrome中运行良好，但现在我的问题是在我的代码中实现它。

这是更新后的font-face：

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

这是我设置font-family的时候：

/* ---------------------------------------------------------------------
   Star Wars Title -------------------------------------------------- */
.logo {
    /* "Star" & "Wars" */
    font-family: 'star_jediregular'; /* TODO: Font doesn't work in Chrome */
    font-size: 180px;
    color: black;
    /* More code below, but irrelevant ... */

我的字体无法在任何浏览器，IE10，Chrome或Opera中使用。显然我错误地嵌入了这个字体，但我不确定我哪里出错了？

GOT IT WORKING - 我使用了错误的文件路径，因为转换的CSS代码没有考虑我的项目目录结构（这完全有道理）。谢谢！

为什么我的.ttf文件无法使用FontSquirrel或Transfonter正确转换为其他格式？

0 个答案: