Spesifisering van 'n reeks fontfamilies met CSS Font-Family Property

Die sintaks van die Font-Family Property

Tipografiese ontwerp is 'n kritiek belangrike stuk van 'n suksesvolle webwerf ontwerp. Die skep van webwerwe met teks wat maklik is om te lees en wat goed lyk, is die doelwitte van elke webdesigner. Om dit te bereik, moet u die spesifieke lettertipes wat u op u webblaaie wil gebruik, kan spesifiseer. Om die lettertipe of fontfamilie op u webdokumente te spesifiseer, sal u die font-familiestyl-eiendom in u CSS gebruik.

Die eenvoudigste font-familie styl wat jy kan gebruik, sal net een fontfamilie insluit:

p {font-family: Arial; }

As u hierdie styl op 'n bladsy toegepas het, sal al die paragrawe vertoon word in die "Arial" -familie. Dit is wonderlik en aangesien "Arial" 'n "web-veilige font" is, wat beteken dat die meeste (indien nie alle) rekenaar dit sou geïnstalleer het, kan jy redelik maklik weet dat jou bladsy in die beoogde skrif sal vertoon .

So, wat gebeur as die skrif wat jy kies nie gevind kan word nie? As u byvoorbeeld nie 'n "web-veilige font" op 'n bladsy gebruik nie, wat doen die agent vir gebruikers as hulle nie daardie font het nie? Hulle maak 'n vervanging.

Dit kan lei tot 'n paar baie snaaks soekende bladsye. Ek het een keer na 'n bladsy gegaan waar my rekenaar dit heeltemal vertoon het in 'Wingdings' ('n ikoon-stel) omdat my rekenaar nie die font gehad het wat die ontwikkelaar gespesifiseer het nie en my blaaier het 'n baie swak keuse gemaak in watter font dit sou wees gebruik as 'n plaasvervanger. Die bladsy was heeltemal onleesbaar vir my! Dit is waar 'n fontstapel in die spel kom.

Afsonderlike veelvuldige font families met 'n komma in 'n lettertipe

'N "Font stack" is 'n lys van lettertipes wat jy wil hê jou bladsy moet gebruik. U sal u fontkeuses volgens u voorkeure plaas en elk met 'n komma skei. As die leser nie die eerste fontfamilie op die lys het nie, sal dit die tweede en dan die derde en so aan probeer totdat dit een op die stelsel vind.

font-familie: Pussycat, Algerijns, Broadway;

In die bostaande voorbeeld sal die leser eers na die "Pussycat" -letter soek, dan "Algeryns" en dan "Broadway" as geen van die ander lettertipes gevind word nie. Dit gee jou meer kans dat ten minste een van jou gekose lettertipes gebruik sal word. Dit is nie perfek nie, daarom het ons nog meer wat ons by ons fontstapel kan voeg (lees verder!).

Gebruik generiese lettertipes laaste

So jy kan 'n fontstapel skep met 'n lys van lettertipes en het nog steeds niks waarvan die blaaier kan vind nie. U wil natuurlik nie hê u bladsy moet onleesbaar wees as die blaaier 'n swak substitusie keuse maak nie. Gelukkig het CSS ook 'n oplossing hiervoor: generiese fonts .

U moet altyd u fontlys beëindig (selfs al is dit 'n lys van een familie of net veilige fonts) met 'n generiese font. Daar is vyf wat jy kan gebruik:

Die twee bogenoemde voorbeelde kan verander word na:

font-familie: Arial, sans-serif; font-familie: Pussycat, Algerijnse, Broadway, fantasie;

Sommige font familiename is twee of meer woorde

As die fontfamilie wat u wil gebruik, meer as een woord is, moet u dit omskep met dubbele aanhalingstekens. Terwyl sommige blaaiers fontfamilies sonder die aanhalingstekens kan lees, kan daar probleme wees as die witruimte kondenseer of geïgnoreer word.

font-familie: "Times New Roman", serif;

In hierdie voorbeeld kan u sien dat die letternaam "Times New Roman", wat 'n multi-woord is, in aanhalings ingesluit is. Dit vertel die leser dat al drie van hierdie woorde deel van die fontnaam is, in teenstelling met drie verskillende lettertipes, almal met eenwoordname.

Oorspronklike artikel deur Jennifer Krynin. Geredigeer op 12/2/16 deur Jeremy Girard