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

Question

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

这在AWS上不支持吗？我在这里阅读了一些其他答案，它们以相同的方式实现了font-face，但在特定浏览器中存在问题。

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 静态网站上使用自定义字体还有其他方法吗？

- Don

---

步骤1：进入您的浏览器开发者控制台，查看“网络”选项卡或“控制台”选项卡，并找到错误消息，说明为什么浏览器无法加载字体文件。步骤2：回到这里并编辑您的问题以添加错误消息。 - Mark B

控制台没有错误。在网络中，该文件未列出。我认为它应该被列出，因为它被称为（例如图像文件）？我感到相当困惑。 - Don

听起来你的CSS有问题。在本地工作吗？ - Mark B

Answer 1

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

我曾经为这个问题苦苦挣扎，直到最近才解决了它。 有几件事情需要检查：

1. 浏览器缓存：在开发过程中，使用无痕模式或定期清除缓存是一个好主意，因为我已经进行了重大更改，却想知道为什么我看不到它们，这有点尴尬。

2. 确保路径完全正确，即没有前导 /，并且大小写匹配。 例如，如果您的文件名为 Custom_font.ttf，并且在内容文件夹中，则路径将为 content/Custom_font.ttf，然后在 CSS 文件中的完整行如下：

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

路径始终相对于您打开的文件/页面或在 HTML 中使用 <base href="relative/path"> 指定的基准点。

希望这可以帮助到您。

- Bob Brownhill

Answer 2

你需要为你的SPA设置重定向：

https://docs.aws.amazon.com/amplify/latest/userguide/redirects.html#redirects-for-single-page-web-apps-spa

你需要指定格式：

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

建议在网页字体中使用woff2。

- vinzcelavi