静态aws网站上的自定义字体

Question

我正在尝试使用字体face在css类中使用自定义字体。我尝试了两种不同类型的文件（.otf和.ttf）。我将自定义字体文件上传到S3存储桶中。我还授予了字体文件的公共权限，并尝试使用相对和完整的url路径。

aws不支持此功能吗？我在这里读到了其他一些答案，它们以同样的方式实现了字体，但在特定的浏览器中存在问题。

CSS：

@font-face {
    font-family: CustomFontName;
    src: url(/pathToCustomName/CustomFontName.ttf); 
}
div.testing{
    font-family: CustomFontName;
    font-size: 150px;
}

HTML:

<div class="testing"> TESTING CUSTOM FONT </div>

类被清楚地识别，但字体没有实现。这是aws的问题还是我遗漏了一些明显的东西？有没有其他方法可以在aws静态网站上使用自定义字体？

Answer 1

我看到这是一篇旧帖子，所以更多地为遇到同样问题的其他人发布。

我在这个问题上挣扎了一段时间，直到最近才解决。有几件事需要检查：

1. 浏览器缓存：在开发时，隐姓埋名或定期清除缓存是个好主意，我做出重大更改并想知道为什么我不能看起来有点尴尬的次数。

2. 确保路径完全正确，即前面没有/和大写匹配。例如，如果你的文件Custom_font.ttf在一个内容文件夹中，路径是content/Custom_font.ttf，那么css中的整行是：

   src: url('content/Custom_font.ttf');

如果在html中使用<base href="relative/path">，则路径始终与打开的文件/页面或指定的基点相对。

希望这能帮助

Answer 2

您必须为SPA设置重定向：https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-对于单页web应用spa

您必须指定格式：

@font-face {
    font-family: CustomFontName;
    src: url(/pathToCustomName/CustomFontName.ttf) format('ttf'); 
}

建议将woff2用于web字体。