链接预加载不能避免字体加载重复

时间:2019-02-04 19:56:52

标签: html google-chrome google-chrome-devtools preload

我读了link preload documentation。在html的art_sigsegv_fault 0x00000000e7e571d0 art::FaultManager::HandleFault(int, siginfo*, void*) 0x00000000e7e57774 art::art_fault_handler(int, siginfo*, void*) (.llvm.650222801) 0x00000000e7e5749b ___lldb_unnamed_symbol22$$app_process32 0x00000000598aa6af ___lldb_unnamed_symbol2$$libc.so 0x00000000eace1c50 art::ManagedStack::ShadowFramesContain(art::StackReference<art::mirror::Object>*) const 0x00000000e8093086 art::Thread::DecodeJObject(_jobject*) const 0x00000000e81d8ac8 <unknown> 0x00000000e876d05d dlsym 0x00000000598a9530 部分中,我有

head

稍后,我加载了一个<link rel="preload" href="/css/fonts/XRXV3I6Li01BKofINeaB.woff2" as="font"> 文件,其中它加载的字体完全相同(请检查font.css):

url

在Chrome上显示错误?

但是Chrome控制台发出警告

  

资源https://autocosts.work/css/fonts/XRXV3I6Li01BKofINeaB.woff2已使用链接预加载进行了预加载,但在窗口加载事件发生后的几秒钟内未使用。请确保它具有适当的@font-face { font-family: 'Nunito'; font-style: normal; font-weight: 400; src: local('Nunito Regular'), local('Nunito-Regular'), url("/css/fonts/XRXV3I6Li01BKofINeaB.woff2") format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } 值并且已被有意地预加载。

实际上,浏览器两次加载相同的文件(第一行和第三行完全引用同一文件)! enter image description here

如何通过避免文件加载重复来使预加载工作?

1 个答案:

答案 0 :(得分:0)

我解决了添加type="font/woff2" crossorigin="anonymous"

的问题
<link rel="preload" href="/css/fonts/XRXV3I6Li01BKofINeaB.woff2" as="font" type="font/woff2" crossorigin="anonymous">

Fonts are indeed a special case

  

如果您正确设置了网站的CORS设置,则只要在元素上设置了跨域属性,就可以成功预加载跨域资源。

     

即使取回不是跨源的,这也适用的一种有趣情况是字体文件。由于各种原因,必须使用匿名模式CORS来获取这些内容(如果您对所有详细信息都感兴趣,请参阅字体获取要求)。