Brugerdefinerede skrifttyper er blandt de mest potentielt tiltrækkende aspekter af CSS3 for designere. Med font-face- reglen kan du gengive enhver skrifttype, du har online i din webside-tekst, uanset om brugeren har den installeret eller ej.
Som med de fleste CSS3-teknikker er den grundlæggende kode ret simpel, men den praktiske realitet er lidt mere kompleks.
I denne korte tutorial vil vi løbe gennem det grundlæggende for at inkludere brugerdefinerede skrifttyper på dine sider.
Først skal du sørge for, at den skrifttype, du vil bruge, er licenseret til internetbrug. Næsten alle gratis skrifttyper kan bruges på en hjemmeside, og mange premium skrifttyper er tilgængelige med en licens, der dækker webbrugen.
Dernæst upload din valgte skrifttype til din server. Du kan ønske at gemme den i en dedikeret "skrifttyper" -mappe, men dette er valgfrit.
Husk at inkludere filerne for eventuelle varianter af skrifttypen du planlægger at bruge, f.eks. Fed eller kursiv. Du kan bruge EOT (Embedded OpenType) filer til Internet Explorer og enten OTF (OpenType) eller TTF (TrueType) for resten. (Yderligere muligheder omfatter WOFF (Web Open Font Format) og SVG (Scalable Vector Graphics), men vi vil holde os til mere almindelige typer her.)
Bemærk, hvor fontfilerne er gemt på din server.
Åbn HTML- eller CSS-filen for den side, du arbejder med. Tilføj en skrifttype- ansigtserklæring til stilkoden:
@font-face {}Først inden i font-face sektionen skal du give skrifttypen et navn, som du senere kan bruge til at referere til det:
font-family: 'lovelyFont';Dernæst, stadig inden for font-face- sektionen, angiv placeringen af EOT-filen:
src: url('fonts/lovely_font.eot');Ret skrifttypeens placering og navn efter behov. Tilføj derefter en OTF og / eller TTF skrifttype:
src:url('fonts/lovely_font.otf')src:url('fonts/lovely_font.ttf') Dette er de bare knogler af den nødvendige kode, som i mange tilfælde vil være tilstrækkelige. Der er dog yderligere skridt, vi kan tage for at gøre koden mere pålidelig. Forlæng først dette afsnit for at inkludere en indikator for skrifttype filtype:
src:url('fonts/lovely_font.otf')format('opentype');src:url('fonts/lovely_font.ttf')format('truetype');Som en anden valgfri effektivitetsforanstaltning kan vi få browseren til at tjekke for en lokal kopi af skrifttypen, hvis brugeren allerede har den. Udvid din kode igen som følger, tilføj det lokale afsnit, før du angiver webadressen, så skrifttypen kun downloades, hvis det er nødvendigt:
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');Tilsætningen er den samme for både OTF og TTF. Vi angiver skrifttypenavnet efter det lokale søgeord.
I dette tilfælde har vi to linjer, der angiver den lokale skrifttype, fordi skrifttypenavnet har mere end et ord i det. Den bindende version henvender sig til, hvordan skrifttypenavne gemmes på visse operativsystemer - denne ekstra linje er ikke nødvendig, hvis skrifttypen kun har et enkelt ord i sit navn. Hvis du ved, at en skrifttype kan have forskellige navne på forskellige systemer, skal du inkludere hver af mulighederne i din lokale sektion.
Endelig kan vi anvende skrifttypen til sideelementerne. I CSS-koden for et bestemt element eller en gruppe af elementer skal du blot angive det skrifttypenavn, du brugte, herunder eventuelle tilbagefald, du vælger:
div { font-family: 'lovelyFont', sans-serif; }Hvis du for eksempel vil bruge en fed version af din skrifttype, skal du blot inkludere en anden skrifttype-ansigt sektion med den fed skriftlige fil-URL og en erklæring om "font-weight: bold;". Angiv en skrifttype vægt med fed skrift for ethvert element med den brugerdefinerede skrifttype, der er anvendt til den, og browseren vil automatisk lave den fedte version:
/*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 er det!
Bruger du CSS3 for at udvide de typer ansigter, der er tilgængelige for dig? Bruger du en tjeneste som Adobes Typekit eller Googles webfonter? Lad os vide i kommentarerne.
Fremhævet billede / miniaturebillede, skrifttyper billede via Shutterstock.