Question

我需要一些自定义字体的帮助。出于某种原因，我无法让他们工作，我正在使用.css，我很确定我正在按要求做所有事情。这是我与.css的链接：

<link rel=stylesheet type= "text/css" href= "main.css">

和我的.css：

html, body {
    padding-top: 2em;
    text-align: left;
    width: 50%;
    margin: 0 auto;
}

@font-face {
    font-family: 'Dudu_Calligraphy';
    src: url(fonts/Dudu_Calligraphy.tff);
    font-style: normal;
    font-weight: 100;
}

p {
    font-family: Dudu_Calligraphy
    font-weight= 100;
}

.html，.css和字体都在一个文件夹中，我只是不能在段落上应用它们

Answer 1

首先，你拼错了一点，它应该是font-weight: 100;，而不是font-weight= 100;。

您需要多格式字体才能在网络中使用它们，因为有些浏览器支持一种类型，有些支持另一种类型。

所需格式：TrueType，WOFF，EOT Compressed，SVG。

您的@font-face应如下所示：

@font-face {
    font-family: 'FONTNAME';
    src: url('path/to/font/font.eot');
    src: url('path/to/font/font.eot?#iefix') format('embedded-opentype'),
    src: url('path/to/font/font.ttf') format('truetype'),
    src: url('path/to/font/font.woff') format('woff'),
    src: url('path/to/font/font.svg#FONTNAME') format('svg');
}

要生成不同类型的字体，您可以使用此字体生成器：https://www.fontsquirrel.com/tools/webfont-generator

如果您的字体无法在所有平台上正确呈现，您可以尝试以下CSS规则：

* {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

无法获得自定义字体工作

1 个答案: