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

Question

我正在尝试使用 font-face 在我的 css 类中使用自定义字体。我尝试了两种不同类型的文件(.otf 和 .ttf)。我已将自定义字体文件上传到 S3 存储桶。我还授予了字体文件的公共(public)权限，并尝试使用相对和完整的 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 静态网站上使用自定义字体吗？

Answer 1

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

在我最近让它工作之前，我为这个问题苦苦挣扎了一段时间。 有几件事需要检查:

1. 浏览器缓存:在开发时使用隐身模式或定期清除缓存是个好主意，我做了很多次重大更改并想知道为什么我看不到它们的次数有点尴尬。

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

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

如果您使用 <base href="relative/path">，路径总是相对于您打开的文件/页面或指定的基点在你的 html 中。

希望对你有帮助