Question

我在我的网站上尝试过这段代码。

<style type="text/css">


@font-face {
    font-family: Eurostyle;
    src: url(http://www.theamazingmonth.pusku.com/eurostyle.ttf);
    font-weight:700;
}

euro {
    font-family: Eurostyle, Helvetica, Arial, sans-serif;
    font-size: 24px;
}

@font-face {
    font-family: Ebrima;
    src: url(http://www.theamazingmonth.pusku.com/ebrima.ttf);
    font-weight:700;
}

ebrima {
    font-family: Ebrima;
    font-size: 15px;
}

但它似乎无法奏效！我使用Dreamweaver来测试我的代码。在Dreamwever它可以工作，但在Chrome上没有！可能是什么问题呢？你可以在theamazingmonth.pusku.com上查看网站。

提前致谢！

Answer 1

您似乎正在尝试创建自己的元素。没有<euro>或<ebrima>这样的东西。你想要做的是创建一个类，从而添加一个点，你的规则最终会像这样：

.ebrima {
    font-family: Ebrima;
    font-size: 15px;
}

在你想要Ebrima字体的元素上，你将添加class="ebrima"，而不是用虚构元素<ebrima>包裹它们。

Answer 2

无论如何，这在IE＆lt; 10（可能）中不起作用。你应该使用font-face生成器，比如http://www.fontsquirrel.com/tools/webfont-generator

我的font-face语法：

@font-face {
    font-family: 'Eurostyle';
    font-style: normal;
    font-weight: 400;
    src: url('[PATH_TO]/Eurostyle.eot');
    src: url('[PATH_TO]/Eurostyle.eot?#iefix') format('embedded-opentype'),
         url('[PATH_TO]/Eurostyle.woff') format('woff'),
     url('[PATH_TO]/Eurostyle.ttf')  format('truetype'),
     url('[PATH_TO]/Eurostyle.svg#[FONT_ID]') format('svg');
}

请检查：http://caniuse.com/fontface

Answer 3

您需要将类添加到您希望指定字体的元素中。

@font-face {
    font-family: Eurostyle;
    src: url(http://www.theamazingmonth.pusku.com/eurostyle.ttf);
    font-weight:700;
}

.euro {
    font-family: Eurostyle;
    font-size: 24px;
}

@font-face {
    font-family: Ebrima;
    src: url(http://www.theamazingmonth.pusku.com/ebrima.ttf);
    font-weight:700;
}
.ebrima {
    font-family: Ebrima;
    font-size: 24px;
}

<div class="euro">EURO FONT 1234</div>
<div class="ebrima">EBRIMA FONT 1234</div>

Answer 4

除了其他问题之外，http://www.theamazingmonth.pusku.com/eurostyle.ttf处的字体已损坏，您可以通过尝试使用FontSquirrel进行转换（如果您打算在网络上使用字体，而不是所有浏览器都支持，则可以看到）。 ttf字体）。它似乎缺少将字符代码位置映射到字形的索引。请与字体的作者或供应商联系，或使用其他字体。

CSS Font-face无效

4 个答案: