Sérsniðnar leturgerðir eru meðal hugsanlega aðlaðandi þætti CSS3 fyrir hönnuði. Með reglunum um letur og augliti geturðu látið hvaða letur sem þú hefur á netinu á texta vefsíðunnar þinnar, hvort sem notandi hefur það sett upp eða ekki.
Eins og með flestar CSS3 tækni, grunnkóðinn er frekar einföld, en hagnýtur veruleiki er svolítið flóknari.
Í þessari stuttu kennsluefni munum við hlaupa í gegnum grunnatriði með því að nota sérsniðnar leturgerðir á síðum þínum.
Fyrst skaltu ganga úr skugga um að letrið sem þú vilt nota sé leyfi til notkunar á vefnum. Næstum öll ókeypis leturgerðir geta verið notaðar á vefsíðu og mörg hágæða leturgerðir eru fáanlegar með leyfi sem nær yfir vefnotkun.
Næst skaltu hlaða valið letrið þitt á netþjóninn þinn. Þú gætir viljað geyma það í hollur "letri" skrá en þetta er valfrjálst.
Mundu að fela skrárnar fyrir allar afbrigði af letri sem þú ætlar að nota, svo sem feitletrað eða skáletrað. Þú getur notað EOT (Embedded OpenType) skrár fyrir Internet Explorer og annaðhvort OTF (OpenType) eða TTF (TrueType) fyrir the hvíla. (Önnur valkostir eru WOFF (Web Open Font Format) og SVG (Scalable Vector Graphics) en við munum halda áfram að fá fleiri algengar gerðir hér.)
Skrifaðu athugasemd um hvar leturskrárnar eru geymdar á netþjóninum þínum.
Opnaðu HTML eða CSS skrána fyrir síðuna sem þú ert að vinna með. Bættu við letri og andlitsyfirlýsingu við stíllarkóðann:
@font-face {}Fyrst inni í letur-andliti kafla, gefðu letrið nafn sem þú getur notað til að vísa til síðar:
font-family: 'lovelyFont';Næst, ennþá inni í letur-andlitshlutanum , gefðu upp staðsetningu EOT-skráarinnar:
src: url('fonts/lovely_font.eot');Breyta stað og heiti letrið eftir þörfum. Næst skaltu bæta við OTF og / eða TTF leturgerð:
src:url('fonts/lovely_font.otf')src:url('fonts/lovely_font.ttf') Þetta er ber bein af nauðsynlegum kóða, sem mun vera nóg í mörgum tilvikum. Hins vegar eru frekari skref sem við getum tekið til að gera kóðann áreiðanlegri. Fyrstu framlengingu þessa kafla er að innihalda vísbendingu um leturgerðartegund:
src:url('fonts/lovely_font.otf')format('opentype');src:url('fonts/lovely_font.ttf')format('truetype');Sem önnur valfrjáls skilvirkni, getum við fengið vafrann til að athuga staðbundin afrit af letrið ef notandinn hefur það þegar. Framlengdu kóðann aftur eins og hér segir og bættu við svæðisbundnum hlut áður en þú tilgreinir slóðina þannig að letrið sé aðeins hlaðið niður ef þörf krefur:
src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.otf')format('opentype');src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.ttf')format('truetype');Aukin er sú sama fyrir bæði OTF og TTF. Við tilgreinum leturnafnið eftir staðbundnu leitarorði.
Í þessu tilfelli höfum við tvær línur sem tilgreina staðarnetið þar sem leturnafnið hefur meira en eitt orð í því. Hnitmiðað útgáfa gefur til kynna hvernig leturgerðir eru geymdar á tilteknum stýrikerfum - þessi viðbótarlína er ekki nauðsynleg ef letrið hefur aðeins eitt orð í nafni sínu. Ef þú verður að vita að leturgerð getur haft mismunandi nöfn á mismunandi kerfum, þá er hægt að velja hvert af möguleikum í staðbundnum kafla.
Að lokum getum við sótt letrið við hliðarþætti. Í CSS-númerinu fyrir tiltekið frumefni eða hóp af þáttum, tilgreindu einfaldlega leturnafnið sem þú notaðir, þar með talið fallfall sem þú velur:
div { font-family: 'lovelyFont', sans-serif; }Ef þú vilt til dæmis nota djörf útgáfa af leturgerðinni þínu skaltu einfaldlega innihalda aðra leturgerðarsíðu með djörf letursskráarslóð og yfirlýsingu um "leturstærð: feitletrað". Tilgreindu leturþyngd feitletraðs fyrir hvaða þáttur sem er með sérsniðið letur sem notað er til þess og vafrinn mun sjálfkrafa gera feitletrunina:
/*default version*/@font-face {font-family: 'lovelyFont';src: url('fonts/lovely_font.eot');src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.otf')format('opentype');}/*bold version*/@font-face {font-family: 'lovelyFont';src: url('fonts/lovely_font_bold.eot');src:local('Lovely Font Bold'),local('Lovely-Font-Bold'),url('fonts/lovely_font_bold.otf')format('opentype');font-weight: bold;}/*container element*/div { font-family: 'lovelyFont', sans-serif; }/*span elements inside the container div*/span { font-weight: bold; }Það er það!
Notarðu CSS3 til að auka gerðarsniðin sem eru í boði fyrir þig? Ertu að nota þjónustu eins og ritgerðir í Adobe eða Webfonts Google? Láttu okkur vita í athugasemdunum.