Niet alleen het kopiëren van de @font-face van Google Fonts Url ‘ s

0
32

Ik denk niet dat dit een epidemie of iets, maar ik heb het gedaan een paar keer en zelfs gepleit voor. Dit is wat ik bedoel…

Je gaat naar Google Fonts en kies een lettertype, zoals Open Sans, en het geeft je een <link> of een @import URL er in die gereed dit lettertype voor gebruik op uw website.

U kunt een kijkje nemen en zien wat het geeft…

Het is net wat @font-face verklaringen, natuurlijk!

Nu je prestaties-minded hersenen begint. Wachten. Dus, ik maak een HTTP-verzoek voor deze stylesheet, en dan maakt het meer HTTP-verzoeken voor deze woff2 bestanden het is te koppelen. Schroef de middelste man hier, waarom niet gewoon kopiëren @font-face blokken naar rechts uit van het hier en gebruik ze.

Je kunt! Maar!

Het probleem is dat Google doet fancy Google dingen hier en de inhoud van de oorspronkelijke stylesheet verandert, afhankelijk van de browser die daarom vragen. Dat screenshot hierboven is Chrome 66. Hier is Firefox 20 op Windows 7:

Het is anders! Maar woff, niet woff2. Als we die URL opent in IE 8, zouden we een @font-face blok bevat de eot-formaat!

Het punt is, wat dat URL geeft heel specifiek naar wat de huidige browser nodig heeft. Dat is een cool ding om te abstract weg en geen zorgen over. Nieuwe browsers beschikken over nieuwe formats en nieuwe CSS-syntax nodig is, dat je kom gewoon langs voor de rit.

Niet dat Google Fonts is perfect met dit spul. Bijvoorbeeld door het niet beheersen van uw eigen @font-face blokkeert, u kunt niet profiteren van font-display, dat is een schande. Misschien krijgen we dat op een dag, of misschien is het de moeite waard self-hosting van uw Google Fonts, dat is nog een hele ding krijgen we in op een dag.

De Jetpack WordPress plugin draait op deze site, het voeden niet alleen de gerelateerde berichten hieronder, maar de beveiliging en de back-ups, Markdown ondersteuning, site search, reactieformulier, sociale netwerk-verbindingen, en meer!