Sådan forbinder du CSS-skrifttyper: Instruktion
Hvis du er designer eller webmaster, så hellereAlt i alt ved du, hvordan du forbinder CSS-skrifttyper. Hvis du er ejer af en lille blog og besluttet at dekorere din ressource og gøre den unik, så skal denne viden hjælpe dig. Men det er bedre end at starte fra begyndelsen, for at forstå, hvad cascading stilark er, hvor man kan få skrifttyperne og hvor de skal installeres.
beskrivelse
Så svaret på, hvordan man forbinder en CSS-skrifttype tilsite, skal begynde med en beskrivelse af det formelle sprog selv. CSS er cascading stilark. Dette sprog bruges til at beskrive udseendet af dokumentet. Det fungerer sammen med markupsprog.
CSS arbejder for at påpege de visuelle egenskaber ved sider på internettet. Sidstnævnte skal oprettes på basis af specielle HTML eller XHTML markup sprog.
anvendelse af
Hvem har brug for CSS? Forbind skrifttyper, sæt farver, stedblokke og så videre brug for webmastere, programmører, der arbejder med oprettelsen af webstedet. Hovedopgaven for cascading stilark er at visuelt adskille strukturen. Det vil sige, hvis HTML danner en solid tekstblok, hjælper CSS med at betinget "dekorere" denne blok, vælg elementer, tildele parametre.
Separation giver dokumentet tilgængelighed, større fleksibilitet og kontrol. Det giver dig mulighed for at slippe af med komplekse og gentagelige elementer af indhold.
tilslutning
Før du regner ud, hvordan du forbinderskrifttyper i CSS, skal du finde ud af, hvordan de cascading stilark er synkroniseret med filen. Deres regler implementeres på samme sprog. Selve stilarket har erhvervet de CSS-regler, som det bruger. Tabeller kan placeres i et visuelt redigeret dokument eller i en separat fil med .css-udvidelsen. I en sådan fil er der kun kommandoer og mærker til dem.
Så det bliver tydeligt, at stilark kan forbindes med flere metoder. Overvej dem yderligere.
metoder
Der er fire muligheder, der vil hjælpeforbinde CSS-skrifttyper, tildele nuance, definere blokke osv. Som tidligere nævnt kan et sæt regler findes i en fil skrevet i HTML. Men denne mulighed kan ikke lide mange designere. Det skyldes, at det er svært at finde beskrivende parametre i hele kommandoen på lærredet og at gøre det hele. Det er meget nemmere at tildele stilarter i et separat dokument.
Hvis CSS'en er placeret separat, er de forbundet via tagget <link>. Den skal placeres indenfor <head> og </ head>. I dette mærke skal du angive href-attributten, som viser adressen til filen med CSS.
Hvis kommandoerne igen indsamles af en separat fil,Vi forbinder dem med et webdokument via @import-direktivet. Det skal skrives mellem markeringerne <style> og </ style>. Umiddelbart efter <style> placerer vi direktivet og i parentes, efter url, angiver linket til filen med CSS. I begge tilfælde gælder reglerne for hele dokumentet.
De følgende to metoder vedrører situationennår CSS er placeret direkte i det dokument, du vil dekorere. Stilarket kan i dette tilfælde ligge mellem markeringerne <style> og </ style>. Og den fjerde metode indebærer at placere reglerne i grundlaget for en af tagsne, gennem stilattributten. Derefter vil reglerne påvirke en enkelt parameter, der ligger inden for grænserne af en bestemt tekst.
De to første metoder markerede udseendet af eksterne stilark og den anden - interne.
skrifttyper
Hvad bruges skrifttyper til? Selvfølgelig ønsker hver sideejer at hans ressource ser ikke kun smuk ud, men også unik. Jeg vil gerne placere på siderne med særlige elementer, der kunne skille sig ud blandt alle. Også du ofte bemærker overskrifter eller menuen for ikke-standard skriftligt.
Der er mange spørgsmål om dette. Måske brugte webmastere billedet tegnet i "Photoshop". Måske kom denne mulighed fra Flash. Der er en mulighed, der brugte Javascript. Men som praksis viser, er den første mulighed ubehagelig og langsom, den anden er forældet, og den tredje er for forvirret. For at skabe noget nyt og smukt kan du forsøge at forbinde CSS-skrifttyper.
egenskaber
Det skal forstås, at i vores tilfælde er skrifttyperIkke kun en bestemt stil, men også et sæt af en række egenskaber, der er nødvendige for at styre udseendet af teksten. Du kan bruge flere muligheder. Tildel en bestemt skrifttype til titel, afsnit, citat, krops tekst, menu, osv.
På trods af at brugeren har adgang til en enormforskellige stilarter, størrelser, mætninger osv., er det vigtigt ikke at glemme læsbarheden. Det er bedre at undgå en stor bunke af forskellige stilarter. Det vil være nok to skrifttyper på siden.
familie
For at kunne vælge stilenfont, brug fontfamiliefamilien. Det er meget vanskeligt at entydigt forstå, om der er en bestemt skrifttype på læserenes pc af din ressource, det er bedre at indtaste alle de samme type muligheder. I dette tilfælde vælger browseren den, der findes i brugerens system.
Denne familie har en række betydninger. For eksempel er familienavnet repræsenteret af navnet på skrifttypefamilien. Værdien generisk familie definerer de fem største skriftfamilier.
Font-style-familien er ansvarlig for valg af skrifttype. Denne stil er også arvet som den forrige. Blandt værdierne er almindelig eller skrå og kursiv. Font-variant stilen er ansvarlig for små store bogstaver. Til mætning skal du bruge skrifttype-vægt osv. Du kan tildele størrelsen og farven til skrifttypen.
Ikke-standard løsning
Ud over standard skrifttyper kan du brugeikke-standardiserede løsninger. Normalt er de mere unikke og sandsynligvis vil du ikke se dem på konkurrenternes websteder. For at gøre dette behøver du ikke bruge billeder, javascript og flash. Det vil være nok at tage reglen @ font-face. Det giver brugeren mulighed for at indlæse en ekstern fil i et dokument.
Denne metode gør det muligt at forbinde en CSS-skrifttype.OTF og TTF. Disse er specielle formater, der gør et godt stykke arbejde med lignende opgaver. Problemer kan kun opstå med Internet Explorer-browseren. På trods af at han først begyndte at bruge tredjeparts skrifttyper i 1997, stiller han nu strenge krav.
Han gør meget for at forkæle dit job. Ofte kan det komprimere en skrifttypefil, undertiden kan den kryptere den. Derfor er der alle slags hacks.
formater
Der er nu flere skrifttypeformater, somskal vide. Ellers vil du støde på en række inkonsekvenser og uforenelighed. Du kan forbinde en CSS TTF-skrifttype. Dette format understøttes nu af alle webbrowsere. En undtagelse kan være Internet Explorer version 8 og lavere, samt Opera Mini 5.0-8.0.
Kun EOT kan arbejde med EOT. Situationen med WOFF er den samme som med TTF. Men SVG opererer i Chrome browsere op til version 37, samt Safari, iOS Safari, Android Browser. Som praksis viser, er det bedst at bruge TTF. Dette er den mest alsidige løsning, der sjældent forårsager problemer. Han er den mest almindelige.
regel
Så, for at forbinde skrifttypen til en afovenstående formater er det nok at bruge reglen @ font-face, som vi talte om tidligere. For at være klar skal du følge en bestemt algoritme. Du har en font.ttf skrifttype fil. For at bruge det til hovedteksten skal du først kopiere selve filen i den mappe, hvor alle webstedsfilerne er placeret.
Hvis du vil bruge mere end en skrifttype, kan du oprette en særlig mappe, hvor du uploader dem. Så det vil være meget nemmere for dig at finde dem og ændre indholdet af en sådan mappe.
Nu skal vi gøre browseren uafhængig downloadet vores skrifttype. Til dette skal du give ham en indikation. Brug @ font-face-direktivet. Holdet vil se sådan ud:
@ font-face {
font-familie: MyUniqueFont;
src: url ("skrifttyper / font.ttf");
}
Font-family-teamet er ansvarlig for at sikre skrifttypenfik navnet og efter det kunne bruges i skriftlig stil. I den anden linje er der en indikation af den sti, hvormed browseren skal finde stilen og forbinde den. Dette er ikke en universel adresse. Afhængigt af hvor du lægger skrifttypefilen, vil denne sti også være anderledes. Så du vil lære at forbinde CSS-skrifttypen fra mappen.
Tilslutninger
Hvis du ikke ved, hvordan du forbinder flereCSS-skrifttyper, er der også en instruktion om dette. Det giver dig mulighed for at angive flere filer på én gang. For eksempel kan de være forbundet med et dusin. For at gøre dette skal du bruge ovenstående regel @ font-face. Efter eksemplet på hvordan du tidligere har knyttet en fil fra en mappe på samme måde med en ny linje, skal du angive links til andre skrifttypeindstillinger.
Hvis dit websted er bygget på WordPress,Tilslut stilarter endnu nemmere. Når du skal erstatte header stilen, skal du blot indtaste admin panelet. Der søges efter "Temaindstillinger". I afsnittet "Typografi" vil der være en hel liste over forskellige muligheder. Du skal blot vælge og gemme ændringen.
Andre muligheder
Meget ofte at forbinde skrifttyper brugGoogle Fonts-tjeneste. Dette er et populært værktøj til valg og tilslutning af stilarter. Der er et stort antal sæt skrifttyper. For at forbinde dem skal du bare gå til den officielle hjemmeside.
Du vil se en hel liste med eksempler ogmulighed for at eksperimentere. Når du har tilføjet den ønskede stil, skal du ikke glemme at vælge cyrillisk, hvis din ressource er på russisk. Derefter kan du vælge størrelse, stil eller øjeblikkeligt vælge flere muligheder for alle lejligheder.
Når du har din kode klarindstillet til css fil. I dette tilfælde gælder reglerne for tilføjelsesmetoder også. Hvis f.eks. Stilark er repræsenteret ved et separat dokument, sendes kommandoen til den første linje. Hvis du har stilarkene direkte i HTML-filen, skal du føje det til kroppen af <style> og </ style> -koderne.
fund
Tilføj nye skrifttyper til dit websted er let. Det er vigtigt at bestemme med metoderne og mulighederne med det samme. Afhængigt af hvilket system dit websted er på, skal du tænke gennem disse handlinger. Hvis du har en håndskrevet ressource, er der få muligheder i dette tilfælde. Hvis for eksempel WordPress, så er denne operation meget nemmere end det kan synes.
