Vlads Merževičs
Fonts ir neatņemama web dizaina sastāvdaļa, piešķir vietnei izteiksmīgumu un atpazīstamību, izsaka vietnei raksturīgo stilu un ir tieši saistīts ar tekstu uztveri. Labi izvēlēts fonts var netikt pamanīts, bet bez tā nebūs tā pievilcības, kas padara vietnes dizainu pilnīgu.
Ja datorā jau ir instalēts konkrēts fonts, tad stilos pietiek ar rindiņas pievienošanu.
h1 (fontu saime: SuperPuperFont;)
Fontu saimes rekvizīta vērtība ir burtveidola nosaukums, tā tiks lietota visiem virsrakstiem
... Bet ko redzēs vietnes apmeklētāji, ja viņiem nebūs instalēts mūsu iespaidīgais un retais fonts? Šāda situācija, visticamāk, ir, tādēļ, ja pārlūkprogramma neatpazīst deklarēto fontu, tā izmantos noklusējuma fontu, piemēram, operētājsistēmā Windows tas ir Times New Roman. Viss mūsu rūpīgi pārdomātais tipa dizains sabruks vienas nakts laikā, tāpēc mums jāmeklē vispusīgākais risinājums. Pirmā lieta, kas uzreiz nāk prātā, ir organizēt fonta faila lejupielādi lietotāja datorā un parādīt tekstu izvēlētajā fontā. Salīdzinot ar citām metodēm, piemēram, teksta attēlošanu, izmantojot attēlu, šī metode ir vienkāršākā un daudzpusīgākā.
Kādas ir fontu faila lejupielādes priekšrocības un pēc tam tā lietošana, izmantojot CSS.
- Tekstu ir viegli pievienot un rediģēt.
- Pārlūkprogrammā varat izmantot meklēšanu un atrast vajadzīgās frāzes.
- Pārlūka iestatījumos varat samazināt vai palielināt fonta lielumu, lai nodrošinātu ērtu skatīšanu.
- Meklētājprogrammas labi indeksē dokumenta saturu.
- Tekstu var atlasīt un iekopēt starpliktuvē, kā arī tulkot citā valodā.
- Teksta parametrus, piemēram, rindstarpu, krāsu, izmēru un tamlīdzīgus parametrus, ir viegli mainīt, izmantojot CSS rekvizītus.
- Atkal, izmantojot CSS, tekstam var vienkārši pievienot dažādus efektus, piemēram, ēnu.
Kā redzat, ir daudz priekšrocību. Ir daži nelieli mīnusi, un ir vērts pieminēt līdzsvaru.
- Ne visas pārlūkprogrammas versijas atbalsta lejupielādējamo fontu un vienādu formātu visiem.
- Fails, kas satur burtveidolu, var aizņemt liels apjoms tādējādi palēninot tīmekļa lapas ielādi.
Tabula 1 ir norādītas pārlūkprogrammas versijas un to atbalstītie fontu formāti.
| Formāts | Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| TTF | 9.0+ | 4.0+ | 10.0+ | 3.1+ | 3.5+ | 2.2+ | |
| EOT | 5.0-8.0 | ||||||
| WOFF | 9.0+ | 5.0+ | 3.6+ | ||||
| SVG | 1.0+ | 9.0+ | 3.1+ | 3.5+ | 1.0+ |
Visvairāk atbalstītais formāts ir TTF. Izņemot IE līdz versijai 9.0 un iOS, visas pārlūkprogrammas to lieliski saprot. Tātad, ja jums ir fonts šajā formātā un jūs atlasāt mērķauditoriju modernās pārlūkprogrammas, papildu darbības nav nepieciešamas. Pietiek stilos ierakstīt šādu kodu (1. piemērs).
Piemērs 1. TTF pievienošana
HTML5 CSS3 IE 8 IE 9+ Cr Op Sa Fx
Vispirms ielādējiet pašu fonta failu, izmantojot @ font-face noteikumu. Tā iekšpusē mēs ierakstām burtveidola nosaukumu, izmantojot parametru font-family, un ceļu uz failu, izmantojot src. Tālāk mēs izmantojam fontu kā parasti. Tātad, ja mums ir jāiestata virsraksta fonts, tad h1 atlasītājam, kā parādīts piemērā, mēs iestatām rekvizītu font-family ar ielādētā fonta nosaukumu. Vecākām IE versijām mēs uzskaitām atkāpšanās gadījumus, atdalot tos ar komatiem. V Šis gadījums virsraksta fonts būs "Comic Sans MS", jo IE8 un jaunāki modeļi neatbalsta TTF formātu.
Šī piemēra rezultāts ir parādīts attēlā. 1.
Rīsi. 1. Galvene ar lejupielādēto fontu
Ko darīt, ja jums ir nepieciešams grezns fonts IE8? Par laimi @ font-face ļauj vienlaikus iekļaut vairākus fontu failus. dažādi formāti... Pārlūkprogrammai ir tikai jāizvēlas piemērotais. Tādējādi universāls risinājums, kas darbojas visās pārlūkprogrammās, ir esošā TTF formāta konvertēšana uz EOT un pēc tam abu failu savienošana.
Konvertēšanai ir vairāki tiešsaistes pakalpojumi, kas ļauj lejupielādēt TTF failu un iegūt EOT failu izvadē. Diemžēl lielākajai daļai šo pakalpojumu ir tāda pati problēma - mēs saņemam failu, bet tajā netiek atbalstīta krievu valoda. Rezultātā vēlamais rezultāts netiek sasniegts, konvertēšana ir nepareiza. Starp vietnēm, kuras es pārbaudīju, bija viena, kas IE rādīja tekstu pareizi.
Dodieties uz šo vietni, ielādējiet TTF failu un nospiediet pogu "Konvertēt TTF uz EOT", pēc tam mēs saglabājam iegūto failu fontu mapē. Stīlos ir palicis neliels triks, lai piespiestu dažādas pārlūkprogrammas ielādēt fontu pareizajā formātā. Lai to izdarītu, pievienojiet divus src parametrus. Pirmais norāda uz EOT failu un ir paredzēts vecākām IE versijām. Otrajam src parametram ir jābūt divām adresēm, kas atdalītas ar komatiem, un viena no tām norāda uz TTF failu. Fakts ir tāds, ka IE versija 8.0 un vecākas versijas nesaprot komatu src parametrā un attiecīgi ignorēs parametru. Var būt vairākas pareizrakstības opcijas, piemēram, atkārtot url, norādīt fonta nosaukumu lokālajā parametrā vai ierakstīt neesošu fontu. Ja pārlūkprogramma nevar ielādēt šādu fontu, tas pāries uz otro sarakstā, un mēs to uzrakstīsim pareizi. Pieņemami rakstīšanas veidi.
src: url (fonti / pompadur.ttf), url (fonti / pompadur.ttf);
src: vietējais (pompadur), url (fonti / pompadur.ttf);
src: vietējais ("bla bla"), url (fonti / pompadur.ttf);
Darba opcija fonta pievienošanai visām pārlūkprogrammu versijām ir parādīta 2. piemērā.
2. piemērs. EOT pievienošana
HTML5 CSS3 IE Cr Op Sa Fx
Mūsdienīgs politiskā procesa elements
Faktiski Monteskjē politiskā doktrīna vada kontinentālās un Eiropas politiskās kultūras veidu, kas tika atspoguļots Michels darbos.
Kas attiecas uz iOS, man šķiet, ka nav lielas jēgas izveidot un lejupielādēt atsevišķu fontu SVG formātā. Vietņu auditorija, kas to pārlūko, izmantojot iOS, joprojām ir neliela, turklāt vietnes versija ir zema mobilās ierīces mēģina to atvieglot, un nav ieteicams ielādēt papildu vairākus desmitus kilobaitu.
Google tīmekļa fonti
Ērts pakalpojums, kas pārņem dažādu fontu formātu un pārlūkprogrammu versiju atbalsta rutīnu, ir atrodams vietnē www.google.com/webfonts... Lai gan kolekcijā ir salīdzinoši maz dažādu fontu (to ir vairāki desmiti), tie visi ir ļoti kvalitatīvi un bez maksas lietojami vietnēs.
Pirms fonta izvēles pārslēdziet Script vērtību uz kirilicu, tad redzēsiet sarakstu ar fontiem, kas atbalsta krievu valodu (2. att.).
Rīsi. 2. Fontu atlase programmā Google Web Fonts
Fonts, kas jums patīk, vispirms jāpievieno kolekcijai, noklikšķinot uz pogas "Pievienot kolekcijai" un pēc tam uz pogas "Lietot" ekrāna apakšējā labajā stūrī. Ieslēgts nākamā lapaspuse(3. att.) beidzot varat izvēlēties vajadzīgos fontus. Jāsaprot, ka burtveidā var būt vairāki stili, un katrs no tiem palielina lejupielādēto failu apjomu.
Rīsi. 3. Lapā ielādētie fonti
Varat savienot atlasītos fontus ar vienu no trīs veidi, pievienoto kodu var kopēt uz leju lapā.
1. Caur elementu ... Līnija izskatīsies šādi.
2. Izmantojot @import kārtulu. Mēs ievietojam šo rindiņu mūsu CSS failā pašā augšpusē.
@import url (http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic);
3. Izmantojot JavaScript.
Būtībā visi ceļi ir vienādi, tāpēc izvēlieties atbilstoši savām vēlmēm.
Lietojumprogrammas priekšrocības šo pakalpojumu tādi.
- Fontus var izmantot bez maksas, par tiem nav jāmaksā.
- Piedāvātie fonti ir "uzasināti" apskatei uz ekrāna, faili ir optimizēti un aizņem salīdzinoši nelielu apjomu.
- Pārlūkprogramma tiek noteikta automātiski, un tai tiek parādīts fonts vajadzīgajā formātā.
Viena no galvenajām pakalpojuma priekšrocībām ir tā, ka fonti tiek saglabāti TTF, EOT, WOFF, SVG formātos un tiek ielādēti pēc pārlūkprogrammas pārbaudes. Tātad EOT formāts būs pieejams tikai vecākām IE versijām.
Tas, vai izmantot Google tīmekļa fontus, ir atkarīgs no jums. Ja neesat tur atradis piemērotu fontu, vienmēr varat pieslēgt populāro un plaši izplatīto TTF. Turklāt tas tiek atbalstīts jaunākās versijas visas populārās pārlūkprogrammas.
// echo get_the_post_thumbnail (get_the_ID (), "relatedthumbnail"); // parādīt manu sīktēla izmēru?>
Šajā apmācībā mēs analizēsim, kā izkārtojumā iekļaut tīmekļa fontus. Tīmekļa fonti ir papildinoši burtveidoli, ko izmanto, lai padarītu dizainu unikālāku vai daudzveidīgāku. Fonta pievienošana lapā - nodrošina tā pareizu attēlojumu visās pārlūkprogrammās, un nav nozīmes tam, vai lietotājs to ir instalējis vai nē.
Kā savienot fontu no Google fontiem
1. darbība - izvēlieties fontu
apkalpošana Google fonti ir liels tīmekļa fontu komplekts, ko var savienot ar projektu vienā rindā un nekavējoties izmantot CSS stili... Lai skatīšanai atlasītu tikai kirilicas fontus, parametra Skripts filtrā pa kreisi ir jāatlasa vērtība Kirilica (kirilicai) vai Kirilica Extended (paplašinātajai kirilicai). Pēc tam labajā pusē tiks parādīti fonti, kas atbalsta kirilicu.
Ātrai lietošanai noklikšķiniet uz pogas Ātrā lietošana.
2. darbība - fontu iestatījumu pielāgošana
Nākamajā lapā mēs izvēlamies, kādus burtveidolus izmantosim. OpenSans ir 10 atsvari — no ļoti tieviem līdz īpaši trekniem. Jo vairāk stilu ir atlasīts, jo vairāk tas ietekmēs lapas ielādes ātrumu. Tāpēc ir vērts savienot tikai tos fontus, kas tiek izmantoti. Pēc tam jūs varat atlasīt rakstzīmju kopas, kirilicai mēs izvēlamies paplašināto kirilicu vai kirilicu un latīņu valodu.
3. darbība - kods fonta savienošanai
Pēc tam mēs paņemam koda rindiņu, lai izveidotu savienojumu ar jūsu vietni. Standarta opcija - trešās puses css faila pievienošana no html, cilnē @import - būs virkne savienojuma izveidei, izmantojot css failu, un trešā opcija Javascript. Pēc tam savienojums ir gatavs un jūs varat izmantot šo burtveidolu izkārtojumā. Zemāk esošajā blokā ir parādīts piemērs, kā piekļūt fontam: font-family: "Open Sans", sans-serif;
Iestatiet platumu, izmantojot parametru font-weight: 300; vai fonta svars: 400; fonta svars: 800; Kursīvs — izmantojot fonta stilu: slīpraksts; ...
Lietošanas piemērs
Rezultātā, ja izvēlējāmies fontu savienot, izmantojot @import CSS, mūsu CSS fails izskatīsies šādi:
/ * Fonta savienojums * / @import url (http://fonts.googleapis.com/css?family=Open+Sans:400,700italic,300&subset=cyrillic-ext,latin); / * Definējiet virsraksta stilu h1 * / h1 (/ * Kā burtveidolu atlasiet pievienoto fontu "Open Sans" * / font-family: "Open Sans", sans-serif; / * Izvēlieties fonta lielumu 300 , kas atbildīs šriftam Light - plānam izmēram * / fonta svars: 300;)
Sveicieni, dārgie lasītāji. Šodien mēs runāsim par Google tīmekļa fontiem, kā tos lejupielādēt un izveidot savienojumu ar vietni.
Dodieties uz vietni www.google.com/fonts/, labajā pusē esošajā filtrā atlasiet: 1. vēlamo kategoriju, 2. ja nepieciešams, sakārtojiet tās un 3. atlasiet mums nepieciešamo valodu (ja nepieciešams krievu fonts izvēlnē kreisajā pusē, izvēlieties Kirilika).
Tātad mēs esam izvēlējušies fontu, tagad mums ir jāizvēlas tā stils, lai to izdarītu, izvērsiet tālāk esošo paneli ( Atveriet atlases atvilktni) un dodieties uz cilni PIELĀGOT un atlasiet vajadzīgos stilus un valodas.
Lai lejupielādētu, noklikšķiniet uz pogas lejupielādēt.
Lejupielādētā fonta savienošana
Kopējiet arhīvā esošos fontus mapē / fonts, kurai jāatrodas tajā pašā direktorijā, kurā atrodas jūsu HTML vietnes / css mape.
Lejupielādēto fontu standarta savienojums izskatās tā
@ font-face (font-family: "Font_name_any"; src: url ("Font_file_name.eot"); src: url ("Font_file_name.eot? #iefix") formāts ("embedded-opentype"), url ("Font_file_name" .eot .woff ") formāts (" woff "), url (" Font_file_name.ttf ") formāts (" truetype "), url (" Font_file_name.svg # DSNoteRegular ") formāts (" svg "); fonta svars: normāls ; fonta stils: normāls;)
Manā gadījumā savienojums izskatīsies šādi
/ * Kods fonta savienošanai /css/style.css * / @ font-face (fontu ģimene: "RobotoRegular"; url (../ fonts / RobotoRegular.ttf") formātā ("truetype"); - stils: normāls; fonta svars: normāls;)
Lai jūsu izvēlēto fontu savienotu ar vietni, dodieties uz cilni IEGULĒT, tur redzēsit 2 savienojuma metodes:
1. STANDARTS
Šis kods ir jāpievieno sadaļai
savu HTML dokumentu.2. @IMPORTĒT
@import url ("https://fonts.googleapis.com/css?family=Roboto:400,700&subset=cyrillic");
Svarīgs. Neatkarīgi no savienojuma metodes izmantojiet šādus CSS noteikumus, lai definētu šīs saimes: font-family: 'Roboto', sans-serif; vairāk par to zemāk.
Sveiki visiem! Jūs varat lasīt par to, ko es rakstīju 132. nodarbībā. Un šajā rakstā es jums pastāstīšu, kā jūs varat ātri un vienkārši savienot fontu ar savu vietni, izmantojot Google fontus. Google fontu pakalpojumā jums ir jāizvēlas savas vietnes fonts un pēc tam tas jāpievieno.
Nav nepieciešams augšupielādēt fonta failu mitināšanā. Pietiek vietnes galvenē un jaunā fonta nosaukumā ierakstīt nepieciešamo HTML kodu. Fontus var savienot ne tikai ar WordPress vietni, bet arī ar jebkuru citu vietni.
Kā savienot Google fontus ar jūsu vietni
Iet uz Google pakalpojums Fonts šajā saitē un atlasiet vajadzīgo fontu.
Fontus var atlasīt, izmantojot filtru. Tas ir, mēs iestatām parametrus, un tādējādi pakalpojums atrod fontus ar atlasītajiem parametriem.
Ja nepieciešams, varat iestatīt citus parametrus: biezums (fonta biezums), slīpums (slīpraksts), platums (fonta platums).
Tāpat ir jāatlasa kirilicas alfabēts, ja jūsu vietne ir krievu valodā: kirilica (kirilica) vai kirilica paplašināta (paplašināta kirilica).
Kad parametri ir atlasīti, pakalpojums parādīs visus ar tiem pieejamos fontus.
Mēs pārvietojam peles kursoru uz fontu, kuru vēlamies instalēt vietnē, pēc kura parādās papildu iestatījumi / parametri: Ātra lietošana ( ātra lietošana), Iznirst (skatīt fontu iekšā atsevišķs logs) un Pievienot kolekcijai.
Mēs izvēlamies " Ātra lietošana"Un redzēt no labā puse logrīks spidometra formā. Tas parāda, cik ātri tiek ielādēts atlasītais fonts. Jo mazāks cipars uz šī spidometra, jo labāk.
Zemāk varat izvēlēties vienu no trim fonta instalēšanas iespējām vietnē: standart, @import vai javascript.
Katrai opcijai ir norādījumi par angļu valoda kā pareizi savienot fontu ar vietni. Es jums parādīšu pirmo iespēju " standarts"Jo tas ir vienkāršāk.
Kopējiet sarkanā krāsā iezīmēto rindiņu un pēc tam ielīmējiet to header.php failā starp tagiem
….
Pēc tam atveriet stilu lapu style.css, atrodiet fontu, kas jāmaina, un uzrakstiet jaunu. Mēs vienkārši ierakstām jaunā fonta nosaukumu. Ievietojiet Google fontus pēdiņās, piemēram, font-family: "Aladin", Arial, Helvetica, Sans-serif.
Ja jūs vispār neko nesapratāt, ko es jums šeit teicu, tad noskatieties video, kurā es jums pastāstīšu sīkāk, Kā savienot Google fontu ar WordPress vietni
______________________
Uz nodarbību 204. un bez spraudņa
Materiāla sponsors.
Gaisa kondicionētāji interneta veikalā http://www.technodom.kz/catalog/konditsionery. Gaisa kondicionieri - labākās preces, kreditēšana, milzīga izvēle, nevainojams serviss.
Labdien, dārgie lasītāji. Jūs, iespējams, visi sapņojat, kā padarīt savas vai klienta vietnes kodolīgākas un pievilcīgākas.
Viens no galvenajiem faktoriem, kas ir atbildīgs par informācijas uztveri vietnē, ir fonti un tas, kā mēs tos lietojam kopā. Tā kā vienā vietnē visbiežāk tiek izmantoti divu vai vairāku veidu fonti, piemēram, virsrakstiem un tikai pamattekstam.
Viena no iespējām vizuāli uzlabot tekstu lasāmību ir trešo pušu fontu savienošana. Galu galā visi droši vien zina, kāda ir "nabaga" standarta kirilicas fontu kolekcija sistēmā Windows, kas ir atbildīga par teksta parādīšanu pārlūkprogrammā.
Standarta fonti:
Cufon un @ font-face
Iepriekš es jau rakstīju par to, ar kuru jūs varat pievienot vietnei nestandarta fontus. Tagad apskatīsim vienkāršāku veidu - tas ir @ font-face noteikums css un paša fonta ielāde no Google Fonts veikala.
Visa atšķirība starp Cufon un @ font-face ir tāda, ka pirmais izmanto js, lai atdarinātu fontu un zīmē simbolus ar saviem līdzekļiem, savukārt @ font-face lejupielādē pašu fontu apmeklētāja datorā un pārlūkprogramma to jau izmanto, lai parādītu tekstu.
Jebkurā gadījumā Cufon un @ font-face palēnina vietnes ielādes ātrumu, lai gan ne ievērojami.
Google fontu izmantošana vietnē
Nekrāsošu daudz un ilgi, sniegšu konkrētu piemēru Google Fonts savienošanai, par piemēru izmantojot šo blogu.
Kā redzat, manu rakstu nosaukumi un apakšvirsraksti ir veidoti nestandarta fontā, tāpēc tagad praksē es parādīšu, kā to izdarīt, un jūs pēc analoģijas izmēģināsit to savās vietnēs.
Fonta izvēle repozitorijā
Lai nebūtu bail, paskaidrošu - krātuve ir krātuve, bet buržuāziski :). Un tā, mēs ejam uz http://www.google.com/fonts/ un meklējam sev piemērotu fontu:
Ēdienkartē nav daudz:
Kreisajā pusē, kā redzams, ir bloks ar visādiem fontu meklēšanas filtriem, kurā var atlasīt, piemēram, tikai latīņu vai kirilicas fontus. Un augšpusē piemēru parādīšanas iestatījumi, kas ir sadalīti 4 cilnēs:
- Vārds- vairāku burtu displejs. Šajā režīmā ir ērti salīdzināt daudzus fontus vienlaikus un redzēt, kā izskatās konkrētas rakstzīmes;
- Teikums- attēlojums viena teikuma veidā;
- Paragrāfs- tiek parādīts liels teksta fragments, kas ļaus vizuāli salīdzināt fontu jau pašā tekstā;
- Plakāts- tiek parādīti virsraksti, šī salīdzināšanas metode ir ērta, izvēloties fontu, kas tiks izmantots virsrakstos.
Fonta savienošana ar vietni
Pēc tam kolekcijas panelī, kas atrodas apakšā, dodieties uz cilni Lietot, kas ir atbildīga par fontu izmantošanu no jūsu kolekcijas. Šeit jūs uzreiz redzēsit, ka Google parāda, cik ļoti pasliktināsies lapas ielādes ātrums:
Zemāk ir panelis ar "displeja veida" izvēli, atlasiet latīņu (latīņu) un kirilicas (kirilicas), kas dos mums iespēju attēlot gan latīņu, gan kirilicas burtus:
Pēc tam mēs pārejam uz šīs lapas trešo vienumu, proti, pašu savienojumu. Google piedāvā trīs iespējas to fontu iegulšanai — izmantojot js, standarta veidā izmantojot savienojumu ar
un @importēt css failā. Es izmantoju pēdējo metodi.Mēs atveram css failu un ierakstām rindiņu, ko Google mums sniedza:
Tas arī viss, mēs savienojām fontu no Google Fonts ar vietni. Tagad kā to izmantot?
Lietošana CSS
Viss ir diezgan vienkārši, pēc tam, kad esam savienojuši fontu, izmantojot @import, mums ir jāreģistrējas standarta instrukcija tām klasēm un rādītājiem, kurām tiks izmantots mūsu jaunais fonts. Piemēram:
h1, h2, h3 (fontu saime: 'Cuprum', sans-serif;)
Pēc visām šīm manipulācijām jums būs galvenes ar jaunu, nestandarta fontu.
Tas arī viss, paldies par uzmanību un uz drīzu tikšanos.
