如何使用 Amazon S3 CORS 解決 Firefox 跨來源字體載入問題？-css教學-PHP中文網

如何使用 Amazon S3 CORS 解決 Firefox 跨來源字體載入問題？

Linda Hamilton

發布： 2024-12-02 20:37:11

原創

267 人瀏覽過

How to Resolve Firefox Cross-Origin Font Loading Issues with Amazon S3 CORS?

Amazon S3 CORS 和Firefox 跨源字體加載解決方案

最近的更新和有效的解決方案解決了Firefox 無法從域加載字體的長期問題除當前域加載字體的長期問題除當前域網頁外。當透過內容交付網路 (CDN) 提供字體時，通常會出現此問題。

利用Amazon S3 跨源資源共享(CORS)，可以透過以下方法解決此問題：

S3 CORS 配置範例

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

登入後複製

了解解決方案

提供的S3 CORS 配置允許從指定網域請求字體資源，從而授予瀏覽器載入來自不同來源的字體的權限。它允許方法、標頭和回應標頭，如下所示：

AllowedMethod：指定 HTTP GET 方法，瀏覽器使用此方法來取得字體。
MaxAgeSeconds：將回應的快取週期設定為 3000 秒，讓瀏覽器重複使用快取的字型。
AllowedHeader：授予瀏覽器在其請求中包含 Content-* 和 Host 標頭的權限，這是字體載入所必需的。

Cloudfront 快取問題的替代解決方案

如果遇到Cloudfront 緩存，解決方法是利用查詢字串來區分來自不同網域的呼叫：

http://hashhashhash.cloudfront.net/font.woff?https_a.domain.com

登入後複製

此方法可確保Cloudfront 根據指定的查詢字串提供適當的Access-Control-Allow-Origin 標頭。

以上是如何使用 Amazon S3 CORS 解決 Firefox 跨來源字體載入問題？的詳細內容。更多資訊請關注PHP中文網其他相關文章！