Spelen met font subsets en pseudo logic
Zo, da's nog eens een onderwerp hè. Het komt er vooral op neer dat ik wat iedeeen van afgelopen cssday wilde proberen, met name het insluiten van een font voor slechts een paar karakters. Als je eenmaal weet dat het kan ...
Font subset
De techniek heeft betrekking op de mogelijkheid die Google aanbiedt via haar Google Fonts platform. De subset is een functie die al langer beschikbaar is, maar een variant daarop is weer de mogelijkheid om specifieke tekst (of leestekens) in te laden van een font. De functie is nog in beta, maar het werkt al wel :-)
Uiteindelijk levert dit een iets aangepaste @import op in je css:
@import url(http://fonts.googleapis.com/css?family=Anonymous+Pro); @import url(http://fonts.googleapis.com/css?family=Bad+Script&text=a);
h1 { font-family: 'Bad Script', 'Anonymous Pro', serif; }
Hierin wordt eerst via de imports het font "Bad Script", specifiek de letter a, en "Anonymous Pro" ingeladen.
Vervolgens wordt voor de h1 de font-family bepaald. Hier vindt de meeste 'logic' plaats, want daar worden de font's met fallback geplaatst. Dus eerst wordt "Bad Script" gebruikt. Maar komt de browser een letter tegen die niet in de set zit, dan wordt het volgende font gebruikt. Kind kan de was doen.
Logic met paragrafen
Een ander onderwerp dat tijdens cssday voorbij kwam was om even na te denken tijdens je frontend-werk over hoe nodig het is om bepaalde html toe te passen op content. Door logica in content te benutten, kan een hoop styling worden gerealiseerd zonder hiervoor een extra class of span te gebruiken.
In onderstaande codepen beide gecombineerd.