Pridedami pasirinktinius šriftus „WordPress“


Kaip pridėti pasirinktinius šriftus


Tinkamo „WordPress“ svetainės šrifto pasirinkimas yra pagrindinė žiniatinklio kūrimo ir prekės ženklo kūrimo dalis.

Patinka spalvos, vaizdai ir kiti elementai, tipografija vaidina didelę dalį kaip lankytojai suvokia jūsų svetainę.

Laimei, „WordPress“ šriftai yra vienas iš daugelio dalykų, kuriuos galite laisvai tinkinti. Galite naudoti bet kurį nemokamą pasirinktinį šriftą norimoje „WordPress“ svetainėje.

Mes apimsime viską, ką jums reikia žinoti apie „WordPress“ šriftus:

  • A) Kaip pridėti pasirinktinius šriftus „WordPress“ (rankiniu būdu)
  • B) Kaip pridėti pasirinktinius šriftus „WordPress“ (naudojant papildinį)
  • Kodėl verta naudoti pasirinktinius šriftus „WordPress“
  • Kur rasti pasirinktinius šriftus
  • Išvada

A) Kaip rankiniu būdu pridėti pasirinktinius šriftus „WordPress“

Kai reikia įtraukti pasirinktinius šriftus į „WordPress“ rankiniu būdu, turite tris pagrindines parinktis: HTML, „JavaScript“ ir CSS. Kiekvienam metodui yra privalumų ir trūkumų, o kuris iš jų jums tinka, priklauso nuo jūsų nustatymų. Nesijaudinkite, išsamiai apžvelgsime kiekvieną iš jų.

1. CSS ir @importas

Pradėkime nuo mažiausiai rekomenduojamo metodo. Jei planuojate įdiegti pasirinktinius šriftus iš „Google“ šriftų, galbūt pastebėjote, kad jame yra skirtukas su etikete @importas. Ši paslauga suteikia CSS kodo fragmentą.

skirtuką importuoti „Google“ šriftuose

Galite jį priimti tokį, koks yra, ir įterpti į antraštę (plačiau pateiktą žemiau) arba nukopijuoti be >skliausteliuose iki jūsų temos pradžios (arba dar geriau, jei tai yra vaiko tema) stilius.css byla.

/ *
Temos pavadinimas: Dvidešimt septyniolika vaikas
Temos URI: https://wordpress.org/themes/twentyseventeen/
Šablonas: dvidešimt septyniolika
Autorius: „WordPress“ komanda
Autoriaus URI: https://wordpress.org/
Versija: 1.0

* /

@import url ('https://fonts.googleapis.com/css?family=Open+Sans|Roboto');


/ * čia eina papildoma CSS * /

Tai atlikus, šriftas bus įkeltas į jūsų svetainę iš stiliaus lapo. Atrodo, paprastas sprendimas, tiesa? Kodėl tada jis yra mažiausiai rekomenduojamas?

Priežastis yra spektaklio problemos. Naudojant @importas nebėra rekomenduojamas būdas, nes jis neleidžia naršyklėms atsisiųsti kelių stiliaus lentelių vienu metu. Pasekmė: lėtesnis puslapio įkėlimo laikas. Jei įmanoma, būkite atokiau nuo jo.

2. „WordPress“ šablono failo naudojimas

Antras būdas gauti šriftus į savo svetainę yra paimti šriftų bibliotekų pateiktą kodą ir nukopijuoti juos į savo antraštė.php šablono failas. Dauguma standartinių „WordPress“ temų jį turi.

Įsitikinkite, kad padėkite jį kur nors tarp ir skliausteliuose. Tokiu būdu jūsų šriftas bus įkeltas kiekvieną kartą įkeliant puslapį.

Įveskite google šriftų kodą į WordPress antraštę

Jei naudojate vaikų temą, būtinai nukopijuokite pagrindinę temą antraštė.php įrašykite į vaikų temų katalogą ir atlikite jame pakeitimus.

Kai kurios temos yra su nustatymais, leidžiančiais pridėti pasirinktinį kodą antraštėje ir poraštėje per užpakalinę programą. Tai taip pat yra perspektyvus pasirinkimas.

3. Naudojimas @ šriftas

Kol kas kalbėjome tik apie tai, kaip „WordPress“ tinkintus šriftus naudoti kur nors kitur, būtent „Google“ ir „Adobe“ serveriuose. Tačiau taip pat įmanoma priglobti šriftus savo svetainėje ir iš ten juos pasiūlyti lankytojų naršyklėms.

Norėdami tai padaryti, pirmiausia turite atsisiųsti aptariamą šriftą. Prisimenate atsisiuntimo mygtuką „Google“ šriftuose? Tai bus patogu dabar. Kiti teikėjai taip pat leidžia atsisiųsti šriftus.

Kai tai padarysite, įsitikinkite, kad jį gavote žiniatinklio šrifto formatu. Tai reiškia, TTF, OTF arba WOFF. Sužinosite daugiau informacijos apie tai čia. Jei neturite tinkamo žiniatinklio šrifto formato, taip pat galite naudoti ši paslauga konvertuoti savo šriftą į palaikomą.

Kai šrifto failai bus paruošti, turite juos įkelti į savo „WordPress“ svetainę per FTP. Tinkama vieta juos laikyti jūsų vaiko pavadintos temos pakatalogyje šriftai (kūrybingi, mes žinome).

Po to turite įkelti šriftą į savo stiliaus lapą per @ šriftas. Štai kaip tai atrodo:

@ font-face {
šriftų šeima: Roboto;
src: url (http: //localhost/wordpress/wp-content/themes/twentyseventeen-child/fonts/Roboto-Regular.ttf);
šrifto svoris: normalus;
}

Nepamirškite pakeisti šrifto pavadinimo ir jo vietos jūsų svetainėje adreso. Po to bus galima naudoti naują pasirinktinį šriftą.

Tačiau tai taip pat nėra geriausias sprendimas, ypač atsižvelgiant į našumą. „Google“ serveriai greičiausiai yra greitesni nei jūsų, todėl tikriausiai geresnis sprendimas bus įkelti pasirinktinius šriftus iš ten.

4. Šriftų užvaldymas - „WordPress būdas“

Jei norite teisingai pridėti pasirinktinius šriftus „WordPress“ teisingai, naudosite savo funkcijos.php failą (jūsų aktyvios temos katalogą) ir funkciją  wp_enqueue_script arba wp_enqueue_style.

Su jų pagalba mes galime paimti šriftų svetainių pateiktus kodo fragmentus. Tačiau, užuot nukopijavę juos į failą, mes pridėsime juos prie antraštės naudodami funkciją.

Kuo skiriasi? wp_enqueue_script ir wp_enqueue_style? Kaip rodo jų vardai, vienas skirtas scenarijams pridėti, kitas - stiliaus lakštams. Kurį naudoti teisingai, priklauso nuo to, kaip jūsų šaltiniai teikia jūsų pasirinktinius šriftus.

Pvz., „Google“ šriftai suteikia šriftus kaip stiliaus lapelius. Tokiu atveju pridėtumėte juos prie savo „WordPress“ svetainės tokiu būdu:

funkcija add_google_fonts () {
wp_enqueue_style ('google_web_fonts', 'https://fonts.googleapis.com/css?family=Open+Sans|Roboto');
}

add_action ('wp_enqueue_scripts', 'add_google_fonts');

Priešingai nei „Adobe Edge Web Fonts“ šriftai yra „JavaScript“. Todėl, norint juos paslėpti savo svetainėje, kodas turėtų atrodyti taip:

funkcija add_adobe_fonts () {
wp_enqueue_script ('adobe_edge_web_fonts', '//use.edgefonts.net/open-sans.js');
}

add_action ('wp_enqueue_scripts', 'add_adobe_fonts');

Ar nebuvo taip sunku, ar ne? Be to, jūs gaunate papildomų taškų už tai, kad tai padarėte „WordPress“ būdu.

5. Paskambinkite pasirinktinius šriftus savo stiliaus lape

Dabar, kai šriftai buvo įtraukti į jūsų svetainę, galite juos oficialiai naudoti. Tam tereikia savo stiliaus lape pridėti naujo šrifto deklaraciją. Pvz., Norėdami pakeisti antraštės žymų šriftą, naudosite ką nors tokio:

h1,
h2,
h3,
h4,
h5,
h6 {
šriftų šeima: 'Roboto';
}

Pastaba: Atkreipkite dėmesį į tai, kaip jūsų naudojama paslauga nurodo jūsų šriftų CSS deklaraciją. Panašu, kad mūsų bandymo svetainėje nepavyko priversti „Adobe Edge“ interneto šriftų veikti, nes jie vadina „Open Sans“ CSS su atvirieji sansai priešingai nei 'Open Sans' „Google“ šriftuose.

Viskas. Dabar jūs žinote, kaip rankiniu būdu pridėti pasirinktinius šriftus „WordPress“. Sveikinu save, tai yra keletas žinių apie kitą lygį! Akivaizdu, kad tuos pačius veiksmus galima atlikti naudojant papildinius. Apie tai mes kalbėsime toliau.

B) Kaip pridėti pasirinktinius šriftus „WordPress“ per papildinį

„WordPress“ sfera nebūtų tokia, kokia ji būtų, jei nebūtų keletas papildinių sprendimų, kaip pridėti pasirinktinius šriftus prie platformos. Mes peržvelgsime, kaip naudotis Paprastas „Google“ šriftas, kuris yra vienas iš populiariausių papildinių šioje srityje.

1. Įdiekite papildinį

Pirmasis žingsnis yra įskiepio įdiegimas. Norėdami tai padaryti, eikite į Papildiniai> Įdiegti naują. Tada ieškokite papildinio pavadinimo. Paieškos rezultatuose spustelėkite Įdiegti dabar ir suaktyvinkite papildinį, kai jis bus jūsų svetainėje.

2. Pridėkite / pakeiskite šriftus savo svetainėje

Kai papildinys yra aktyvus, rasite naują meniu punktą, vadinamą Tipografija pagal Išvaizda> Tinkinti.

spausdinimo meniu „WordPress“ tinkinimo priemonėje

Kai paspausite ant jo ir pasirinksite Numatytoji tipografija, rasite valdiklių sąrašą, kad pakeistumėte savo pastraipų ir antraščių šriftą.

lengvi „Google“ šriftų nustatymai „WordPress“ tinkinimo priemonėje

Juos naudoti tikrai paprasta. Tiesiog spustelėkite išskleidžiamąjį meniu ten, kur sakoma Redaguoti šriftą jūsų svetainės daliai, kurią norite pakeisti. Tai suteikia prieigą prie šio meniu:

lengvai google šriftai pakeisti šriftą

Svarbiausia dalis yra ta, kuri yra po Šrifto šeima. Čia galite pasirinkti naują šrifto tipą iš visos "Google" šrifto bibliotekos (naudokite Scenarijus / pogrupis apriboti šriftų pasirinkimą turint specialiuosius simbolius).

Šriftai yra suskirstyti pagal standartinius, serif, sans-serif, display, handwriting and monospace šriftus. Tačiau jūs taip pat galite tiesiog ieškoti jų pagal pavadinimą.

Spustelėję šriftą, dešinėje galite peržiūrėti pakeitimus realiuoju laiku.

pakeistas tinkintas šriftas lengvuose „Google“ šriftuose

3. Konfigūruokite šriftą

Pasirinkę šriftą, yra daug variantų, kaip dar labiau pritaikyti savo spausdinimo tipą.

Visų pirma, to paties pavadinimo meniu galite pakeisti šrifto svorį / stilių. Tai kontroliuoja raidžių storį.

Be to, pagal Teksto dekoravimas, galite pridėti pabraukimą, perbraukimą ir perbraukimą. Teksto transformacija taip pat leidžia nustatyti visas didžiausias raides, visas mažąsias arba didžiosiomis raidėmis kiekvieną pirmąją raidę. Pagal Išvaizda skirtuką viršuje, taip pat galite valdyti šrifto spalvą, fono spalvą, šrifto dydį, eilutės aukštį ir raidžių tarpus.

išvaizdos nustatymus lengvais „Google“ šriftais

Pagaliau, Padėties nustatymas leidžia pakeisti kitus parametrus, pvz., paraštę, polsterį, kraštą, kraštinės spindulį ir ekraną.

padėties nustatymus lengvais „Google“ šriftais

Trumpai tariant, jūs turėtumėte sugebėti visiškai pritaikyti savo šriftus savo skoniui. Lengva, ar ne? Nepamiršk paspausti Išsaugoti ir paskelbti viršuje, kai esate patenkinti savo pakeitimais.

Tai neveikia, ką aš darau?

Kartais negalite pakeisti kai kurių šriftų savo svetainėje. Paprastai tai atsitinka, kai jūsų naudojama tema pateikiama su nestandartinėmis CSS klasėmis ir pasirinkimo stiliais.

Pavyzdžiui, „Dvidešimt šešiolikos“ temoje tinklaraščio įrašų pavadinimai ne tik apibrėžti kaip H1, bet ir turi CSS klasę, vadinamą .įrašas-pavadinimas. Dėl šios priežasties papildinys negali jų pakeisti.

Norėdami išspręsti šią problemą, turite sukurti vadinamąjį šrifto valdymas pagal Nustatymai> „Google“ šriftai.

pridėkite šriftų valdymą lengvaisiais „Google“ šriftais

Jei reikia, CSS parinkiklius galite susieti su nauja valdymo ir jėgos valdymo galimybe. Tai padarius, naują šrifto valdymą galima naudoti kaip papildomą parinktį „WordPress“ tinkinimo priemonės skyriuje Temos tipografija. Lengvas žirnis.

Kiti pasirinktiniai šriftai „WordPress“ papildiniai

Yra ir kitų „WordPress“ papildinių, kuriuos galima naudoti pridedant pasirinktinius šriftus:

  • Naudokite bet kokį šriftą - Tai padeda naudoti įkeltus šriftus be jokios CSS. Jame yra šriftai jūsų serveryje, taip pat siūlomi šriftų formatų konvertavimo įrankiai.
  • „Typekit“ „WordPress“ šriftai - Naudokite „Adobe“ šriftus Typekit paslauga (kurią turite pasirašyti). Tai leidžia įvesti įdėjimo kodus ir pasirinktinę CSS tiesiai į papildinį.
  • TK „Google“ šriftai - Alternatyvus „Google“ šriftų įdėjimo sprendimas, kuris „Google“ šriftų patirtį iš esmės perkelia į „WordPress“ pagrindinę programą. Išbandykite šriftus su peržiūra ir tinkintu tekstu, tada pakeiskite juos „WordPress“ tinkinimo priemonės viduje.

Kodėl verta naudoti pasirinktinius šriftus savo „WordPress“ svetainėje?

Tipografija yra savaime suprantamas dalykas, todėl mes negalėsime jums čia pateikti viso kurso apie šriftų naudojimą kuriant interneto svetaines. Galų gale, tai susiję ne tik su šriftu, bet ir su dydžiu, pasvirimu, storiu ir daugybe kitų dalykų. Tačiau mes gali kodėl verta naudoti pasirinktinius šriftus „WordPress“ svetainėje.

1. Tipografija yra pirmojo įspūdžio dalis

Visų pirma, jūsų naudojamas šriftas daro didelę įtaką jūsų svetainės suvokimui. Ar jūsų svetainė linksma ir žaisminga? Ar esate verslo profesionalas? Lankytojai nusprendžia tai padaryti per vieną žvilgsnį, ir jūsų tipografija vaidina svarbų vaidmenį jų suvokime.

2. Šriftai daro daug didesnę įtaką, nei jūs manote

Tai gali paveikti jūsų sugebėjimą mokytis, įsiminti tekstus ir netgi paveikti jūsų nuotaiką.

Pavyzdžiui, viename tyrimai, buvo pažymėta, kad jei norite padidinti laiką, praleidžiamą skaitant tam tikrą tekstą, turėtumėte naudoti serifo šriftą. Tačiau jei norite per trumpą laiką perskaityti daugiau, turėtumėte pereiti į „sans-serif“ šriftą.

Kitas tyrimas parodė žmonėms tas pačias mankštos instrukcijas skirtingais šriftais. Tada jie paprašė dalyvių įvertinti, kiek laiko jiems prireiks minėtų instrukcijų įvykdymui. Įspūdingai, tie, kurie turi sudėtingesnį šriftą, atspėjo, kad tai užtruks ilgiau nei grupė su paprastesniu šriftu. Todėl rečiau jie laikėsi mankštos tvarkos.

Kur rasti pasirinktinius šriftus

1. Norėdami rasti pasirinktinę tipografiją, naudokite „Google“ šriftus

Pirmoji paslauga, į kurią žiūrėsime, yra „Google“ šriftai. Kaip rodo pavadinimas, tai „Google“ paslauga, siūlanti daugiau nei 800 skirtingų šriftų. Nemokamai naudoti. Visiems.

Štai kaip tai naudoti:

2. Raskite tinkamą šriftą

Kai pirmą kartą eisite į „Google“ šriftų puslapį (tiesiog įveskite tai į „Google“ paiešką), tai pamatysite:

kaip pridėti pasirinktinius šriftus į WordPress google šriftų pagrindinį puslapį

Vartotojo sąsaja yra sukurta tam, kad padėtų jums rasti tinkamiausią šriftą. Jei jau turite omenyje šriftą, galite tiesiog įvesti jo pavadinimą į paieškos lauką dešinėje.

Jei ne, galite filtruoti šriftus įvairiais būdais, pavyzdžiui, pagal kategorijas:

  • Serifas - Reikšmingi šriftai su vingiuotomis linijomis pabaigoje, kaip „Times New Roman“.
  • „Sans-Serif“ - Paprasti šriftai be šaškių, kaip „Helvetica“. Šioje svetainėje naudojami šriftai yra to pavyzdys.
  • Ekranas - Šriftas, kurį galima naudoti didesnių dydžių, pavyzdžiui, antraštės.
  • Rankraštis - Ar norite, kad jūsų tipografija atrodytų taip, kaip parašyta ranka? Tada tai yra jūsų nustatymas.
  • Monospace - Tipografija, kai visi personažai užima tą pačią vietą, kaip šitas.

Kiti filtrai apima:

  • Rūšiavimas - Rūšiuokite šriftus pagal populiarumą, populiarumą, pridėjimo datą arba abėcėlę.
  • Kalbos -Rinkitės tik tas kalbas, kurios nėra parašytos lotyniškomis abėcėlėmis, pavyzdžiui, arabų, tailandiečių ar vietnamiečių.
  • Nemažai stilių -Pasirinkite, kiek reikia galimų stilių, ty ar šriftas galimas skirtingo storio, kursyvu, pusjuodžiu ir dar daugiau.
  • Storis - Pasirinkite norimą šrifto storį.
  • Pasviręs - Tas pats kaip storis, bet nuožulniems. Jis svyruoja nuo tiesios iki beveik horizontalios.
  • Plotis - Filtruokite šriftus pagal jų raidžių plotį ir tarpus.

Kai pritaikote bet kuriuos filtrus, paieškos rezultatai koreguojami realiuoju laiku. Kairėje matysite turimus šriftus savo kategorijoje ir sakinių pavyzdžius.

Užvedę pelės žymeklį ant šrifto, viršuje esančius išskleidžiamuosius meniu galite naudoti norėdami, kad „Google Fonts“ pateiktų pastraipos pavyzdį, visą abėcėlę ar skaitmenis. Jūs taip pat galite tiesiog spustelėti sakinio lauką ir parašyti bet ką.

redaguoti teksto pavyzdį „Google“ šriftuose

Be to, yra galimybių pakeisti šrifto stilių ir dydį. Atlikdami pakeitimus taip pat galite pasirinkti juos pritaikyti visuose paieškos rezultatuose. Galiausiai peržiūrėkite informacijos apie šriftą puslapį spustelėdami Žr. Pavyzdį.

informacijos apie šriftą puslapis „Google“ šriftuose

3. Įtraukite šriftus į savo kolekciją

Jei jums patinka tam tikras šriftas, galite naudoti raudoną pliuso ženklą viršutiniame dešiniajame kampe, kad pridėtumėte jį prie savo kolekcijos. Tai atlikus, apačioje atsidarys meniu, kuriame matysite visus pasirinktus šriftus.

šriftų, parinktų google šriftuose

Atminkite, kad galite pridėti daugiau nei vieną šriftų šeimą. Tai prasminga, pavyzdžiui, kai renkatės vieną savo kūno kopijai, kitą - antraštėms.

4. Tinkinkite šrifto parametrus

Kai būsite patenkinti savo kolekcija, spustelėkite apatinį meniu. Tai padarius, bus atidarytas šis ekranas:

šriftų nustatymai „Google“ šriftuose

Kaip matote, galite rasti keletą kodo dalių, kad galėtumėte įterpti ir naudoti šriftus savo svetainėje. Vėliau tai taps svarbu. Kol kas spustelėkite nurodytą skirtuką Pritaikyti. Tai atlikus, pateksite į šį meniu:

tinkinti šriftus „Google“ šriftuose

Čia galite pasirinkti aptariamų šriftų stilius. Tai svarbu, jei norite naudoti skirtingų dydžių šriftus, o tai dažnai nutinka.

Tačiau būkite atsargūs: kuo daugiau stilių turi įkelti jūsų svetainė, tuo labiau jis sulėtės („Google“ šriftai netgi suteikia jums nuorodą į dabartinės kolekcijos įkėlimo greitį viršuje, dešinėje). Taigi, pagalvokite apie tai, ko jums iš tikrųjų reikia, ir rinkitės tik tai. Beje, yra ir daugiau būdų, kaip pagreitinti „WordPress“.

Jei jums reikia bet kurios kitos kalbos, nei įprasta lotyniška abėcėlė, būtinai pasirinkite ją ir apačioje.

pasirinkite šriftų kalbas „Google“ šriftuose

Be to, viskas, ką jums reikia žinoti, yra dvi rodyklių piktogramos viršuje.

atsisiųsti ir bendrinti mygtuką „Google“ šriftuose

Kairėje galite peržiūrėti ir bendrinti savo šriftų kolekciją. Kai pasirinksite tai padaryti, jis atidarys išplėstinį puslapį, kuriame galėsite įterpti teksto pavyzdį ir pamatyti jį visuose šriftuose vienu metu. Šiuo puslapiu taip pat gera dalintis su žmonėmis.

Dar svarbiau yra šalia jo esantis atsisiuntimo mygtukas. Spustelėję ją galite atsisiųsti šriftų failus, kad galėtumėte juos naudoti darbalaukio kompiuteryje (pavyzdžiui, „Photoshop“). Naudokite „Skyfonts“ kad jie būtų nuolat atnaujinami.

Vėliau mes taip pat parodysime būdą, kaip nusiųsti šiuos failus į serverį ir pagrindinius šriftus tiesiai į savo svetainę. Turėkite tai omenyje ateityje. Kol kas parodysime jums antrą, panašią šriftų biblioteką.

Papildomas pasirinktinių šriftų šaltinis

  • Rekomenduojame naudoti daugiau nei 15 žiniatinklio šriftų

Atsižvelgdami į tai, kas išdėstyta pirmiau, turėtumėte sugebėti rasti kažką sau. Paskutinis patarimas - jei nežinote, kaip tinkamai derinti šriftus, naudokite Šriftų pora kur dizaineriai padarė jums koją.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
Like this post? Please share to your friends:
Adblock
detector
map