生产服务器上的 Starjedi TTF 字体无法正常工作

Question

所以正如标题所说，我下载了一个名为'Star jedi'的自定义字体（文件名为Starjedi.tff）。在我的机器上安装字体后，它可以在我的本地开发机器上运行 a:nd 我可以像这样在我的样式表中引用 class :

.jedifont {
    font-family: "Star jedi",arial;
    font-size: 40px;
    text-shadow: 4px 4px 4px black,10px 10px 10px yellow;
}

但是，当我在我的生产服务器上安装字体并使用相同的代码时，文本没有使用我上面创建的 class 样式。

我还在我的生产机器上尝试了以下方法：

.jedifont {
    font-family: "Star jedi",arial;
    src: url("https://www.mysitename.co.uk/folder/folder/Starjedi.ttf") format('truetype');
    font-size: 40px;
    text-shadow: 4px 4px 4px black,10px 10px 10px yellow;
}

和

.jedifont {
    font-family: "Star jedi",arial;
    src: url("../fonts/Starjedi.ttf") format('truetype');
    font-size: 40px;
    text-shadow: 4px 4px 4px black,10px 10px 10px yellow;
}

还有索引页部分中的这个：

<link rel="stylesheet" href="fonts/Starjedi.tff">

不知道我想念什么，希望得到任何指点！谢谢

Answer 1

在你的 css 中的某处，你应该在使用它之前声明一个 @font-face，例如：

@font-face {
    font-family: 'My Font';
    src: url('path/to/font.ttf');
    /* src for additional formats, as fallback for incompatible browsers */
    src: url( 'path/to/font.woff' ) format( 'woff' ),
         url( 'path/to/font.eot' ) format( 'embedded-opentype' ),
         url( 'path/to/font.ttf' ) format( 'truetype' ),
         url( 'path/to/font.svg' ) format( 'svg' );
}

@font-face 声明是 src 应该在的地方。然后你可以使用字体，如：

element {
   font-family: 'My Font';
}

建议使用多种格式以获得跨浏览器的最佳支持。还要确保 url('path/to/font') 中的路径正确指向源文件。在浏览器控制台检查 404 错误。

生产服务器上的 Starjedi TTF 字体无法正常工作

Starjedi TTF font on production server not working

css

fonts