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静态站点上使用自定义字体的方法吗？

Answer 1

我认为这是一篇旧帖子，所以对于遇到同样问题的其他人发布更多信息。

在我最近开始工作之前，我一直在努力解决这个问题。有几件事需要检查：

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

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

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

希望这有帮助

Answer 2

按以下方式配置您的AWS S3存储桶CORS：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
  <CORSRule>
    <AllowedOrigin>http*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
  </CORSRule>
  <CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedMethod>HEAD</AllowedMethod>
  </CORSRule>
</CORSConfiguration>

基于： https://forums.aws.amazon.com/thread.jspa?messageID=406237 https://kahwee.github.io/2016/06/12/how-to-make-vary-origin-in-aws-s3.html

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

2 个答案: