CSS 加載字體時,有時候會遇到跨域的問題。所謂跨域,是指不同二級域名或主域名之間的請求,瀏覽器默認不支持跨域請求,一旦涉及到跨域,就需要進行相關設置。
一般來說,可以通過設置 Access-Control-Allow-Origin 來允許跨域請求。但是,對于字體文件,需要注意以下幾點:
1. 在服務器端設置 Access-Control-Allow-Origin 時,需要將 Access-Control-Allow-Origin 的值設置為 "*",這樣才能讓任意域名都能請求字體文件。
2. 在 CSS 中使用 @font-face 規則時,需要將字體文件的路徑寫成相對路徑(相對于 CSS 文件所在的路徑),這樣才能保證在不同域名下都能正確加載字體文件。
@font-face { font-family: 'MyWebFont'; src: url('./myfont.woff2') format('woff2'), url('./myfont.woff') format('woff'); font-weight: normal; font-style: normal; }
3. 在使用 CDN 服務時,需要在 CDN 服務器上設置 Access-Control-Allow-Origin 的值為 "*",同時應該將字體文件上傳到 CDN 服務器上,保證字體文件可以被正確加載。
總之,在加載字體時,需要考慮到跨域問題,并且要正確設置 Access-Control-Allow-Origin 和字體文件路徑,這樣才能保證不同域名下都能正確加載字體文件。