Koble til Google-fonter. Koble til CSS-fonter
Sponsor av materialet.
Klimaanlegg i nettbutikken http://www.technodom.kz/catalog/konditsionery. Klimaanlegg - de beste produktene, lån, stort utvalg, upåklagelig service.
God ettermiddag kjære lesere. Alle dere drømmer sannsynligvis om å gjøre nettsidene til din eller kunden din mer konsise og attraktive.
En av hovedfaktorene som er ansvarlige for oppfatningen av informasjon på et nettsted er fonter og hvordan vi bruker dem sammen. Siden på ett nettsted brukes to eller flere typer fonter oftest, for eksempel for overskrifter og bare hovedteksten.
En av mulighetene for å visuelt forbedre lesbarheten til tekster er å koble sammen tredjeparts fonter. Tross alt vet nok alle hvor dårlig standardsamlingen av kyrilliske fonter i Windows er, som er ansvarlig for å vise tekst i nettleseren.
Standard fonter:
Cufon og @font-face
Tidligere har jeg allerede skrevet om, som du kan koble ikke-standard fonter til nettstedet. La oss nå se på en enklere metode - @font-face-regelen i css og lasting av selve skriften fra Google Fonts-fontlagringen.
Hele forskjellen mellom Cufon og @font-face er at den første bruker js for å emulere fonten og tegner tegn ved hjelp av sine egne midler, mens @font-face laster selve fonten inn på den besøkendes datamaskin og nettleseren bruker den allerede til å vise tekst .
I alle fall reduserer Cufon og @font-face lastehastigheten på nettstedet, selv om det ikke er vesentlig.
Bruke Google Fonts på et nettsted
Jeg vil ikke skrive for mye, og i lang tid vil jeg gi et spesifikt eksempel på å koble til Google Fonts, ved å bruke denne bloggen som et eksempel.
Som du kan se, er artikkeloverskriftene og underoverskriftene mine laget i en ikke-standard skrift, nå vil jeg i praksis vise deg hvordan du gjør dette, og du vil prøve det samme på nettstedene dine.
Velge en font i depotet
For at du ikke skal bli redd, skal jeg forklare - et depot er et depot, men på en borgerlig måte :). Og så, la oss gå til http://www.google.com/fonts/ og se etter en passende font for deg selv:
Ikke mye på menyen:
Til venstre er det, som du ser, en blokk med alle slags fontsøkefiltre, der du kan velge for eksempel kun latinske eller kyrilliske fonter. Og på toppen, innstillinger for visning av eksempler, som er delt inn i 4 faner:
- Ord— visning av flere bokstaver. I denne modusen er det praktisk å sammenligne mange fonter samtidig og se hvordan spesifikke tegn ser ut;
- Setning— vise i form av én setning;
- Avsnitt— et stort stykke tekst vises, som lar deg visuelt sammenligne skriften i selve teksten;
- Plakat— overskrifter vises; denne sammenligningsmetoden er praktisk for å velge skrifttypen som skal brukes i overskrifter.
Kobler fonten til nettstedet
Etter det, i samlingspanelet, som ligger nederst, går du til fanen Bruk, som er ansvarlig for bruk av fonter fra samlingen din. Her vil du umiddelbart se at Google viser hvor mye sidelastingshastigheten vil forringes:
Nedenfor er et panel med valg av "visningstype", velg latin (latinsk) og kyrillisk (kyrillisk), som vil gi oss muligheten til å vise både latinske og kyrilliske bokstaver:
Etter dette går vi videre til det tredje punktet på denne siden, nemlig selve forbindelsen. Google tilbyr oss tre alternativer for å bygge inn skriftene sine - via js, standardmetoden via tilkobling til
og @import i css-filen. Jeg bruker sistnevnte metode.Åpne css-filen din og skriv linjen som google ga oss:
Det er det, vi har koblet fonten fra Google Fonts til nettstedet, hvordan bruker jeg den nå?
Bruk i CSS
Alt er ganske enkelt, etter at vi har koblet til fonten via @import , må vi skrive standardinstruksjoner for de klassene og identifikatorene som skal bruke vår nye font. For eksempel:
h1, h2, h3 (font-familie: 'Cuprum', sans-serif;)
Etter alle disse manipulasjonene vil du se overskrifter med en ny, ikke-standard font.
Det er alt, takk for oppmerksomheten og se deg snart.
Google Fonts er en av de beste ressursene for gratis nettfonter, og Google gir deg flere måter å importere dem til nettstedet ditt. Dessverre inkluderer ingen av dem den populære WordPress-motoren. Dette betyr at du enten må bruke plugins, som det er mange av, eller få hendene til å tukle med koden.
Den gode nyheten er at du kan installere hvilken som helst font fra Googles bibliotek på nesten alle WordPress-temaer uten mye problemer. Hvordan nøyaktig - vi skal lære deg i dag.
Det er to alternativer - koble til plugin, eller lek deg litt med functions.php-filen.
Men først vil jeg liste opp fordelene og ulempene med Google Fonts, slik at du endelig kan bestemme om du vil bruke dem i prosjektene dine eller ikke.
Det gode og det dårlige med Google Web Fonts
Når det gjelder nettfonter, er Google et av de beste alternativene når det gjelder ytelse . Alt på grunn av det lette designet og hurtigbuffersystemet. Besøkende skal ikke måtte vente på at Google-fonter lastes inn hvis de nylig har besøkt et nettsted som brukte dem. Populære fonter som Open Sans kan forbedre nettstedets ytelse ved å redusere innlastingstiden.
En annen funksjon er det Google lar deg laste ned disse skriftene , slik at du kan bruke dem i oppsettene dine.
Og endelig plattformen er helt gratis . For å begynne å bruke fonter trenger du bare å logge på eller opprette en Gmail-postboks (hvem har ikke Gmail i disse dager?).
Blant manglene det er mulig å indikere det Utvalget av Google-fonter er lite , mange av dem ligner hverandre. Du må bruke mye tid på å søke for å finne en anstendig, original font. Det er svært få fonter for kyrillisk.
I tillegg til dette er det de vanlige sikkerhetsproblemer – du må oppgi litt personlig informasjon når du installerer Google-fonter på nettstedet ditt.
Slik installerer du Google Fonts ved hjelp av WordPress-plugins
Hvis du søker etter plugins, er det første du vil se i søkeresultatene WP Google Fonts og Easy Google Web Fonts plugins . Dette er virkelig to av de beste pluginene.
Plugins er ikke en ideell løsning for å installere Google-fonter på et WordPress-nettsted – ikke bare fra et ytelsessynspunkt, men også fordi plugins ikke lar deg velge spesifikke tekstbiter. Men hvis du eller din klient er overbevist om at plugins er bedre, så se på disse to alternativene.
Dette pluginet lar deg målrette mot spesifikke elementer som H1-overskrifter, avsnitt og sitater. Du får også et tilpasset CSS-alternativ for å jobbe videre med individuelle skriftstiler. Det er ganske enkelt å legge til og tilpasse Google-fonter til WordPress-nettstedet ditt med denne plugin-en.
Easy Google Web Fonts lever opp til navnet sitt, og gjør det superenkelt å installere Google Fonts selv for nybegynnere. Du kan bruke Live Preview til å forhåndsvise, teste og optimalisere skrifter uten å forlate nettstedet ditt, og lage dine egne skriftregler uten å skrive en kodelinje.
Den riktige måten å installere Google Fonts på i en WordPress-mal
Etter hvert kommer vi til muligheten for å åpne functions.php-filen og leke litt med koden. Før du gjør dette, må du velge en font fra Googles bibliotek. For eksempelets skyld, la oss prøve å ta en veldig populær Åpne Sans.
Deretter må du velge en skriftstil - normal, fet eller kursiv. Dette kan du gjøre selv :)
Etter at du har valgt stilene, vil Google gi deg en kodebit. Vår ser slik ut:
I tillegg fikk vi CSS-stilen:
font-family: "Open Sans", sans-serif;
Nå er det på tide å åpne functions.php-filen (filbane: wp-content/themes/yourtheme). På slutten av filen legger du til en ny funksjon:
funksjon load_fonts()
{
wp_register_style("et-googleFonts",
"http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,700,300"); wp_enqueue_style("et-googleFonts");
}
add_action("wp_print_styles", "load_fonts");
Nøkkelen til denne funksjonen er kommandoen "wp_enqueue_style", som tvinger WordPress til å kalle skriftstilark i overskriften på hver side. Hvis du ser nøye etter vil du se at vi har fjernet koblingen href= og rel='stylesheet' type'text/css' fra koden Google ga oss, og du må gjøre det samme hvis du vil legge til en annen Google-font for WordPress-siden din.
Alt du trenger å gjøre nå er å åpne hoved-CSS-filen og lime inn i stilen med Open Sans. De vanlige reglene gjelder her, så legg til følgende kode i stilarket ditt, lagre og oppdater:
kropp
{
font: normal 1em "Open Sans", sans-serif;
farge: #313131;
}
Denne stilen vil fungere på hele nettstedet. Du kan angi en annen stil for individuelle tekstfragmenter:
Fet tekst
{
font: fet 1em "Open Sans", sans-serif;
}
Som du kan se, er alt faktisk veldig enkelt. Prøv det og sjekk resultatet :)
WebFonts er en teknologi for bruk av tredjepartsfonter på nettsiden din. Ett eksempel:Hvis vi starter fra begynnelsen, ble font-taggen introdusert i 1995, og allerede i 1996 ble det skrevet en programvaredefinisjon i CSS. Fra og med versjon CSS 2.0 ble skriftlasting og syntese introdusert i nettlesere, men likevel hadde ikke den da populære, men nå gamle og irrelevante IE støtte for lasting av fonter, noe som hindret den raske utviklingen av bruken av fonter på nettstedet.
På det moderne Internett er nettfonter en veletablert ting. På forskjellige nettsteder kan vi bruke forskjellige typer fonter, som igjen ikke er inkludert i leveringen av et bestemt operativsystem, men det er en uønsket bivirkning, som vi vil snakke om i dag.
Filformater
For å koble fonter brukes en programvareinnsetting i CSS, den såkalte @-regelen. Så, i sin enkleste form, er @font-face en erklæring. Det ser slik ut:/* Angi fonten */ @font-face ( font-family: "Font name"; src: url("path/to/it"); ) /* Bruk fonten */ p ( font-family: "Font navn", Arial;)
TTF eller OTF - en fontfil som er kjent for oss, men lastet ned fra serveren mens du ser på nettstedet;
WOFF er et ubeskyttet OTF- eller TTF-kildearkiv, kanskje det viktigste formatet som de fleste populære nettlesere støtter, og filer i WOFF er vanligvis 2–2,5 ganger lettere enn de originale;
EOT - et arkiv implementert av TT OpenType, som har sikkerhetsmekanismer, er nødvendig for å støtte eldre Internet Explorer-nettlesere (fra og med IE8, i tillegg til TrueType-kurver, støttes også PostScript);
SVG - for å støtte Safari-nettleseren.
I dag må fonter klargjort for implementering (@font-face) på en nettside være i flere formater samtidig. Du innså at det er noen avvik, akkurat som det er mer enn én type operativsystem. Det finnes mange skriftformater, men et spesifikt vil bare fungere i en bestemt nettleser. Når det gjelder nettopp disse formatene, hvorfor så mange av dem må spesifiseres når de kobles til, er de nødvendige for støtte på tvers av nettlesere av nettstedet.
@font-face ( font-family: "Font_name_any"; src: url("Font_file_name.eot"); src: url("Font_file_name.eot?#iefix") format("embedded-opentype"), url("Font_file_name) .woff") format("woff"), url("Font_file_name.ttf") format("truetype"), url("Font_file_name.svg#DSNoteRegular") format("svg"); font-weight: normal; font -stil: normal;)
Hvis du ønsker å bruke kryptert kode i stedet for en fil, kommer i dette tilfellet base64 til hjelp, som fungerer etter samme prinsipp med bilder, men for den gamle IE blir ikke base64 behandlet.
@font-face ( font-family: "Font_name_any"; src: url("Font_file_name.eot"); ) @font-face (font-family: "Font_name_any"; src: url(data:font/woff;charset= utf-8;base64,DATA) format("woff"), url(data:font/truetype;charset=utf-8;base64,DATA) format("truetype"), url("Font_file_name.svg#Font_file_name") format("svg"); font-weight: normal; font-style: normal; )
Innebygd OpenType?
Som du kanskje har lagt merke til, har plugin-fonter for IE en linje med følgende parameter:Src: url("Font_file_name.eot?#iefix") format("embedded-opentype")
I den klassiske versjonen burde vi ha indikert dette til deg:
Src: url("Font_file_name.eot") format("embedded-opentype")
Men når du legger til "?" etter skriftformatet tvinger vi nettleseren til å ikke lese den påfølgende instruksjonen - format("embedded-opentype"). Internet Explorer støtter innbygging av fonter gjennom den såkalte proprietære Embedded OpenType-standarden, som starter med versjon IE 4.0. Den bruker digital rettighetsadministrasjon for å forhindre kopiering av fonter som er lisensiert.
Hva om skriften i nettleseren ikke støttes?
For lenge siden ble løsninger, såkalte "krykker" for å vise en bestemt skrift, oppfunnet. Det er tilfeller der en skrift kun ble designet i SVG-format, eller bare i TTF-format.1. I antikken inkluderte utviklere et bilde, som igjen var tekst skrevet inn i en visuell editor. Men nå anses dette som dårlig form, fordi støtte er ganske vanskelig (du må åpne redigeringsprogrammet igjen for å endre teksten i bildet), slik at brukeren ikke kan kopiere teksten fra bildet.
2. Bruk av blitsløsninger var også vanlig.
3. En annen løsning er å bruke Javascript for å erstatte teksten med VML (for Internet Explorer) eller SVG (for alle andre nettlesere).
Hvilke andre problemer kan oppstå?
Nettleseren vil prøve å synkronisere innlastingen av skriften, den vil prøve å skjule teksten, det vil si gjøre den usynlig til skriften er lastet inn. Denne effekten kalles FOIT, "white flash"-effekten.Flash-effekt
FOIT-effekten i nettlesere som Safari, Chrome, Opera, Firefox har en tendens til å skjule tekst i maksimalt 30 sekunder før den nekter å motta fonten, hvoretter standardfonten settes.Et eksempel på hvordan fonten lastes inn:
Likevel er 2,7 sekunder lang tid!
Hva kan bli gjort?
Den opprinnelige tilnærmingen var å muliggjøre oversettelse av fontfiler til data-URIer slik at disse skriftene kunne inkluderes direkte i fontfamiliedefinisjoner i en CSS-fil. Ved å laste denne CSS-filen på en asynkron måte, kan du sikre at nettleseren umiddelbart gjengir teksten på siden ved hjelp av egendefinerte fonter, og de nye skriftene blir brukt så snart CSS-en er lastet inn.Imidlertid er det en bivirkning i ethvert eksperiment.
Til å begynne med brukte Bram Stein en egendefinert font, men etter at fonten hans ble lastet inn, oppsto "flimmer", i eksemplet etter 0,7 sekunder:
Kort sagt, flimring oppstår når nettleseren prøver å gjengi fonten fra font-familien og bruke den på html. En font definert i @font-face-erklæringen som ennå ikke er lastet inn.
Bram Stein viste hvordan man kobler fonter riktig, han utviklet et script, et alternativ fra Google for asynkron lasting av fonter, dette scriptet er FontFaceObserver.
La oss prøve
Analyse
Standard tilkobling fra GoogleFor å være ærlig, kan bruk av mer enn én skrift på et nettsted faktisk senke nettstedets sidelastingshastighet, og dermed øke den totale lastetiden. Google Fonts API lar deg raskt legge til en font på et nettsted ved hjelp av en fontgenerator, og dermed raskt designe nettstedet ditt. Du må imidlertid være klar over FOIT-effekten. Total lastetid - 322 ms.
Web Font Loader fra Google
Web Font Loader er et JavaScript-bibliotek for avansert API-arbeid, et bibliotek som gir oss mer kontroll over skriftinnlasting enn standard Google Fonts API. Skriptet lar oss bruke mange fonter, laste dem sekvensielt eller asynkront. I motsetning til en standard tilkobling, viser svake tilkoblinger tekst i standardfonten til skriften er lastet.
Total lastetid: 1132 ms
FontFaceObserver
FontFaceObserver er et JavaScript-bibliotek (5kb), en såkalt loader som er kompatibel med alle webfonttjenester. Skriptet lar oss varsle oss om fonten har lastet inn eller ikke, lar oss spore hendelsen etter lasting og før lasting av fonten. Total lastetid: 159 ms
Ved hjelp av et skript.
Hei alle sammen! Du kan lese om det jeg skrev i leksjon 132. Og i denne artikkelen vil jeg fortelle deg hvordan du enkelt og raskt kan koble en font til nettstedet ditt fra Google Fonts. Ved å bruke Google Font-tjenesten må du velge en font for nettstedet ditt, og deretter koble det til.
Det er ikke nødvendig å laste opp fontfilen til hostingen. Det er nok å skrive den nødvendige HTML-koden i sideoverskriften og i navnet på den nye fonten. Fonter kan kobles ikke bare til et WordPress-nettsted, men også til et hvilket som helst annet nettsted.
Hvordan koble Google Fonts til et nettsted
Vi går til Google Font-tjenesten ved å bruke denne lenken og velger skriften vi trenger.
Skrifter kan velges gjennom et filter. Det vil si at vi setter parameterne, og dermed finner tjenesten fonter med de valgte parameterne.
Du kan angi andre parametere om nødvendig: tykkelse (skrifttykkelse), skråstilling (skrå), bredde (skriftbredde).
Du må også velge det kyrilliske alfabetet hvis nettstedet ditt er på russisk: kirillisk (kyrillisk) eller kyrillisk utvidet (kyrillisk utvidet).
Når parametrene er valgt vil tjenesten vise alle fontene som er tilgjengelige med disse.
Vi flytter musepekeren til fonten som vi ønsker å installere på siden, hvoretter ytterligere innstillinger/parametre vises: Hurtigbruk (hurtigbruk), Pop out (se fonten i eget vindu) og Legg til samling (legg til til samlingen).
Plukke ut " Rask bruk"og vi ser en widget i form av et speedometer på høyre side. Den viser hvor raskt den valgte fonten lastes inn. Jo lavere tall på dette speedometeret, jo bedre.
Nedenfor kan du velge ett av tre alternativer for å installere fonten på nettstedet: standard, @import eller javascript.
Hvert alternativ har instruksjoner på engelsk om hvordan du kobler fonten til nettstedet på riktig måte. Jeg skal vise deg det første alternativet " standard", fordi det er enklere.
Kopier linjen uthevet i rødt, og lim den deretter inn i header.php-filen mellom kodene
….
Deretter åpner vi style.css-filen, finner fonten som må endres, og legger til en ny. Vi skriver ganske enkelt navnet på den nye fonten. Vi plasserer Google Fonts-fonten i anførselstegn, for eksempel font-familie: "Aladin",Arial,Helvetica,Sans-serif.
Hvis du ikke forstår noe av det jeg sa her, så se videoen der jeg snakker i detalj, hvordan koble Google Font til WordPress-nettstedet
______________________
For leksjon 204. uten plugin
Fonten spiller en viktig rolle i utformingen av nettstedet; det kan understreke den generelle stilen og hjelpe brukeren med å navigere i tekstinnholdet. Å søke etter gratis fonter og deretter koble sammen en haug med filer for forskjellige nettlesere er ikke en givende oppgave, men det er en vei ut – fonter fra Google Fonts.
Finne riktig font fra Google Fonts
La oss gå til selve Google-fonttjenesten og se på funksjonene.
I panelet til venstre (side) kan du konfigurere fontfiltreringsparametrene og, viktigst av alt, velge om det tilhører det kyrilliske eller latinske alfabetet.
I den øvre delen kan du endre visningen av demoteksten i form av: ord, setninger, avsnitt, plakater. Endre skriftstørrelsen og skriv inn teksten din i stedet for demoalternativet.
Koble til en font fra Google Fonts
Etter at du har valgt ønsket font, klikker du på "hurtigbruk"-knappen (se bildet nedenfor)
På fonttilkoblingssiden må du velge:
1. Skriftstiler, dristighet, kursiv, etc. Ikke kjør for mye, velg bare det mest nødvendige, fordi... alt dette påvirker hastigheten på innlasting av fonten og følgelig hastigheten på innlasting av tekst på nettstedet ditt. Overvåk sensoravlesningene til høyre (punkt 5 på bildet)
2. Velg hvilke tegn du trenger i denne fonten (hovedsakelig latin og kyrillisk).
3. Kopier lenkekodekoden inn i HEAD-blokken
4. Bruk skriftdeklarasjonen i stiler som vist i trinn 4 (se bilde)