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

【问题标题】：custom fonts on static aws site静态 aws 网站上的自定义字体
【发布时间】：2020-08-27 17:04:01
【问题描述】：

我正在尝试使用 font-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 静态网站上使用自定义字体吗？

【问题讨论】：

第 1 步：进入浏览器的开发者控制台并查看“网络”选项卡或“控制台”选项卡，然后找到错误消息，说明浏览器未加载字体文件的原因。第 2 步：返回此处并编辑您的问题以添加错误消息。
控制台没有错误。在网络中，该文件未列出。我假设它应该按它的名称列出（例如图像文件）？我很困惑。
听起来你的 CSS 有问题。它在本地工作吗？

标签： css twitter-bootstrap amazon-web-services amazon-s3 font-face

【解决方案1】：

我看到这是一篇旧帖子，因此请为遇到相同问题的其他人发布更多内容。

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

浏览器缓存：在开发时使用隐身或定期清除缓存是个好主意，我进行重大更改的次数并想知道为什么我无法显示它们有点尴尬。
确保路径完全正确，即前面没有 / 和大小写匹配。例如，如果您的文件 Custom_font.ttf 位于内容文件夹中，则路径为 content/Custom_font.ttf，那么您的 css 中的整行将是：

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

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

希望对你有帮助

【讨论】：