Fontu pāru priekšskatījums
Priekšskatiet virsraksta un pamatteksta fontu pārus ar 20 atvērtas licences fontiem, pielāgojiet izmēru un rindas augstumu un nokopējiet CSS font-family kopas.
Ieteiktie pāri
Priekšskatījums
Instalējiet npm pakotnes un importējiet tikai izmantotos biezumus. Pēc tam fonti tiek piegādāti no jūsu pašu vietnes, bez fontu CDN.
Kā lietot fontu pāru priekšskatījumu
- Sāciet ar kādu no Ieteiktie pāri (Redakcionāls, Mūsdienīgs blogs, Mērķlapa, Ziņas, Elegants, Tehnoloģiju žurnāls, Grāmata, Klasisks, Dokumentācija, Rotaļīgs). Katra poga parāda virsraksta fontu un pamatteksta fontu, ko tā piemēro.
- Vai izvēlieties savu Virsraksta fonts un Pamatteksta fonts. Saraksti ir sagrupēti sans-serif, serif, display, monospace un rokrakstu fontos. Apmainīt fontus tos apmaina.
- Pielāgojiet Virsraksta izmērs, Pamatteksta izmērs un Rindas augstums un izvēlieties Virsraksta biezums (Treknraksts (700) vai Parasts (400)). Atzīmējiet Tumšs fons, lai pārbaudītu pāri tumšajā režīmā.
- Aizvietojiet Virsraksta teksts un Pamatteksts ar saviem vārdiem: īsts virsraksts un īsta rindkopa pasaka daudz vairāk nekā pangramma. Starp rindkopām atstājiet tukšu rindu.
- Nokopējiet CSS kods un pēc tam sekojiet Pašmitināšana ar Fontsource, lai pievienotu fontus savam projektam.
Fonti tiek ielādēti pirmoreiz, kad tos izvēlaties (apmēram 12 līdz 50 KB uz vienu biezumu). Tie tiek piegādāti no šīs vietnes, nekad no fontu CDN.
Kas veido labu fontu pāri
- Kontrasts, nevis konflikts. Klasiskā recepte ir serif vienai lomai un sans-serif otrai: Playfair Display virs Lato vai Montserrat virs Merriweather. Divi fonti, kas ir līdzīgi, bet ne identiski (teiksim, divi ģeometriskie sans-serif), bieži izskatās pēc kļūdas.
- Mierīgs pamatteksta fonts. Pamatteksts ir tas, kurā cilvēki pavada savu laiku. Izvēlieties fontu ar atvērtām burtu formām un vidēji augstu x-augstumu (Inter, Lato, Open Sans, Source Serif 4, Merriweather), bet display fontus, piemēram, Playfair Display, DM Serif Display, Oswald vai Caveat, paturiet īsiem virsrakstiem.
- Saskanīgas proporcijas. Fonti ar līdzīgu x-augstumu labi sader vienā rindā un vienā kolonnā.
- Pietiek ar diviem fontiem. Hierarhiju veidojiet ar izmēru, biezumu un atstarpēm, nevis ar trešo fontu.
Salasāmam pamattekstam labs sākuma diapazons ir 16 līdz 20 px ar rindas augstumu starp 1,4 un 1,7 un aptuveni 60 līdz 75 rakstzīmēm rindā. Virsrakstiem parasti vajadzīgs blīvāks rindas augstums (1,1 līdz 1,3), ko CSS kods iestata jūsu vietā.
CSS kods
Kods deklarē divas pielāgotās īpašības, --font-heading un --font-body, katru ar rezerves kopu: ja tīmekļa fonts vēl nav ielādēts, pārlūkprogramma parāda līdzīgu sistēmas fontu (Georgia serif fontiem, sistēmas UI fontu sans-serif fontiem). Izmēri tiek rakstīti rem (16 px = 1rem), tāpēc tie seko lasītāja pārlūkprogrammas fonta izmēra iestatījumam.
Pašmitināšana un licences
Visi 20 fonti nāk no Fontsource, kas iepako atvērtā koda fontus npm lietošanai. Instalēšanas lodziņš dod komandu npm install un import rindas latīņu apakškopai un tikai jūsu izmantotajiem biezumiem; pēc tam jūsu pakotņu veidotājs nokopē woff2 failus jūsu būvējumā. Fontu piegāde no jūsu pašu domēna ir ātrāka (nav papildu savienojuma), darbojas bezsaistē un novērš apmeklētāju IP adrešu sūtīšanu trešās puses fontu pakalpojumam, kas ES ir zināma VDAR problēma.
Katrs šeit esošais fonts saskaņā ar pakotnes metadatiem ir ar SIL Open Font License 1.1: drīkstat to izmantot vietnēs, lietotnēs un drukā, komerciāli vai nekomerciāli, un iegult. Fontu failus atsevišķi pārdot nedrīkst. Ja fontu modificējat, tam jāsaglabā OFL un nedrīkst izmantot sākotnējo rezervēto nosaukumu. Licences fails ir iekļauts katrā pakotnē.
Biežāk uzdotie jautājumi
Vai šis rīks izmanto Google Fonts?
Nē. Daudzas no šīm saimēm ir pieejamas arī Google Fonts, taču šeit faili nāk no Fontsource npm pakotnēm un tiek piegādāti no šīs vietnes. Neviens pieprasījums netiek sūtīts uz Google vai citu fontu CDN.
Kāpēc daži virsraksti nekļūst treknāki?
DM Serif Display eksistē tikai parastajā biezumā. Tad rīks to rāda ar 400, to norāda zem vadīklām, un CSS kods izmanto 400.
Vai var savienot divus serif vai divus sans-serif fontus?
Jā, ja tie skaidri atšķiras pēc lomas un biezuma, piemēram, trekns šaurs virsraksts ar gaišu, atvērtu pamatteksta fontu. Rīks parāda piezīmi, kad abi fonti pieder vienam stilam, jo serif un sans-serif kontrastu ir vieglāk panākt pareizi.
Kādas rakstzīmes ir iekļautas?
Priekšskatījums ielādē latīņu apakškopu (angļu, franču un lielākā daļa Rietumeiropas valodu ar diakritiskajām zīmēm, œ, « » un eiro zīmi) un, ja fontam tās ir un jūsu tekstam vajadzīgas, latin-ext (Centrāleiropas burti, piemēram, č, ł, ő, ț), kirilicas un grieķu apakškopas. Fonti bez apakškopas šos burtus rāda rezerves fontā: Lato, Work Sans vai Space Grotesk nav kirilicas, un grieķu burti ir tikai Inter, Roboto, Open Sans, Source Serif 4 un Fira Code. Nevienam no 20 fontiem nav arābu burtu. Latviešu burtiem (ā, č, ē, ģ, ī, ķ, ļ, ņ, š, ū, ž) tiek ielādēta latin-ext apakškopa, ja fonts to piedāvā, un instalēšanas lodziņā ir norādītas arī atbilstošās importa rindas.
Vai šos fontus var izmantot komerciālā projektā?
Jā. SIL Open Font License atļauj komerciālu lietošanu bez maksas un bez norādes jūsu dizainā. Aizliegts tikai pārdot fontu failus atsevišķi.
Saistītie rīki
- PX uz REM pārveidotājs Pārveidojiet px uz rem un em ar jebkuru saknes fonta izmēru, veidojiet masveida tabulu un pārvērtiet visas CSS fragmenta px vērtības uz rem ar vienu klikšķi.
- Krāsu paletes ģenerators Ģenerējiet krāsu paletes no vienas pamatkrāsas pēc krāsu harmonijas noteikumiem: komplementārās, analogās, triādes, tetrādes, kvadrāta un monohromās.
- Kontrasta pārbaude Bezmaksas WCAG kontrasta pārbaude. Ievadiet teksta un fona krāsu, lai iegūtu kontrasta attiecību, AA/AAA rezultātus un tuvāko derīgo krāsu.
- CSS gradienta ģenerators Veidojiet lineārus, radiālus un koniskus CSS gradientus ar tiešo priekšskatījumu. Pievienojiet un velciet krāsu pieturas un nokopējiet tīru CSS kodu.