Anpassade teckensnitt är bland de mest potentiellt tilltalande aspekterna av CSS3 för designers. Med teckensnitt-ansiktsregeln kan du göra vilket teckensnitt du har online i din webbsida, oberoende av om användaren har den installerad eller inte.
Som med de flesta CSS3-tekniker är grundkoden ganska enkel, men den praktiska verkligheten är lite mer komplex.
I den här korta handledningen går vi igenom grunderna för att inkludera anpassade teckensnitt på dina sidor.
Kontrollera först att teckensnittet du vill använda är licensierat för webbanvändning. Nästan alla fria teckensnitt kan användas på en webbplats och många premium-teckensnitt är tillgängliga med en licens som täcker webbanvändning.
Ladda sedan upp ditt valda teckensnitt till din server. Du kanske vill spara den i en dedikerad "typsnitt" -katalog men det här är valfritt.
Kom ihåg att inkludera filerna för alla varianter av teckensnittet du planerar att använda, till exempel fet eller kursiv. Du kan använda EOT (Embedded OpenType) -filer för Internet Explorer och antingen OTF (OpenType) eller TTF (TrueType) för resten. (Ytterligare alternativ inkluderar WOFF (Web Open Font Format) och SVG (Scalable Vector Graphics) men vi kommer att hålla fast vid vanligare typer här.)
Notera var fontfilerna är lagrade på din server.
Öppna HTML- eller CSS-filen för den sida du jobbar med. Lägg till en teckensnitt-ansiktsdeklaration till stilkoden:
@font-face {}Först inuti font-face- sektionen, ge tecknet ett namn som du senare kan använda för att referera till det:
font-family: 'lovelyFont';Nästa, fortfarande inom avsnittet font-face , ange platsen för EOT-filen:
src: url('fonts/lovely_font.eot');Ändra plats och namn på teckensnittet efter behov. Lägg sedan till en OTF- och / eller TTF-typsnitt:
src:url('fonts/lovely_font.otf')src:url('fonts/lovely_font.ttf') Detta är de nakna benen av den nödvändiga koden, som i många fall är tillräckliga. Det finns dock ytterligare steg vi kan vidta för att göra koden mer tillförlitlig. Först utöka detta avsnitt för att inkludera en indikator på typsnittstypen:
src:url('fonts/lovely_font.otf')format('opentype');src:url('fonts/lovely_font.ttf')format('truetype');Som en annan valfri effektivitetsåtgärd kan vi få webbläsaren att söka efter en lokal kopia av teckensnittet om användaren redan har den. Förläng din kod igen enligt följande, lägg till den lokala sektionen innan du anger webbadressen, så att teckensnittet bara hämtas om det behövs:
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');Tillsatsen är densamma för både OTF och TTF. Vi anger typsnittet efter det lokala sökordet.
I det här fallet har vi två rader som anger den lokala fonten eftersom teckensnittsnamnet har mer än ett ord i det. Den bindande versionen passar för hur teckensnittsnamn lagras på vissa operativsystem - den här extra raden är inte nödvändig om teckensnittet bara har ett enda ord i namnet. Om du råkar veta att ett teckensnitt kan ha olika namn på olika system, inkludera alla möjligheter i din lokala sektion.
Slutligen kan vi använda teckensnittet till sidelementen. I CSS-koden för ett visst element eller en grupp av element anger du bara det typsnitt du använde, inklusive eventuella fallbacks du väljer:
div { font-family: 'lovelyFont', sans-serif; }Om du till exempel vill använda en djärv version av ditt teckensnitt, ska du helt enkelt inkludera ett annat teckensnitt-ansiktsavsnitt med fetstilfilsadressen och en deklaration av "font-weight: bold;". Ange en typsnitt med fetstil för ett element med den anpassade teckensnitt som appliceras på den och webbläsaren kommer automatiskt att göra den djärva versionen:
/*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; }Det är allt!
Användar du CSS3 för att expandera de ansiktsskyltar som är tillgängliga för dig? Använder du en tjänst som Adobes Typekit eller Googles webbfonter? Låt oss veta i kommentarerna.
Utvalda bild / miniatyrbild, typsnitt bild via Shutterstock.