Chcę użyć wstępnego pobierania html do wstępnego pobrania pliku czcionki. I przestrzegać zaleceń tutaj: https://css-tricks.com/prefetching-preloading-prebrowsing/Wstępne zasoby są ładowane dwukrotnie.
<!doctype html>
<html>
<head>
<link rel="prefetch" href="https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2">
<style>
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3ZBw1xU1rKptJj_0jans920.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
html, body {
font-family: 'Open Sans';
}
</style>
</head>
<body>
Hello world
</body>
</html>
Jednak plik czcionki jest faktycznie ładuje dwukrotnie na Chrome. Nie próbowałem innych przeglądarek.
Am I robić coś niepoprawnie?
Na moim Chrome 49 windows vista ono wyłącznie ładunki raz. [** tutaj jest zrzut ekranu **] (https://i.gyazo.com/26f727b39b8f57c97b57d0bb58304163.png) –
Myślę, że ładuje się dwa razy, ponieważ ładujesz go raz w tagu linku, który pokazuje się jako czcionka typu/woff2 i raz w src z czcionką, która pojawia się jako czcionka typu. Nie jestem zaznajomiony z prefetch, ale mogłem używać czcionki tylko z czcionką, ale nie potrzebowałem tagu linku. Jeśli jednak spróbuję użyć tylko znacznika łącza, bez czcionki, to załaduje on czcionkę/woff2, ale nie mógłbym użyć czcionki bez reguły z czcionką. Myślę, że tutaj chodzi o to, że ładujesz czcionkę raz w tagu linku i raz w regule czcionki, ale obecnie nie są one powiązane. – frajk
@frajk Odpowiedź nie polega na usunięciu tagu linku. W świecie rzeczywistym css jest zewnętrznym arkuszem stylów, który zawiera inny arkusz stylów, który zawiera deklarację rodziny czcionek. Jeśli każdy arkusz stylów ma nietrywialne formatowanie, ważne jest wstępne pobieranie. –