Ablakok.  Vírusok.  Laptopok.  Internet.  Hivatal.  Segédprogramok.  Drivers

2014.11.27. 88,7K

A html-ben a betűméret fontos szerepet játszik. Lehetővé teszi, hogy felhívja a felhasználó figyelmét a webhely oldalán közzétett fontos információkra. Bár nem csak a betűk mérete a fontos, hanem a színük, vastagságuk, sőt családjuk is.

Címkék és attribútumok, ha html betűtípusokkal dolgozik

A hipertext nyelv számos eszközzel rendelkezik a betűtípusokkal való munkavégzéshez. Hiszen a szöveg formázása a html fő feladata.

A HTML nyelv létrehozásának oka a szövegformázási szabályok böngészőben való megjelenítésének problémája volt.


Nézzük meg azokat a címkéket, amelyek a HTML-ben a betűtípusokkal és azok attribútumaival dolgoznak. A fő a címke . Attribútumainak értékeivel beállíthatja a betűtípus számos jellemzőjét:
  • color – beállítja a szöveg színét;
  • méret – betűméret hagyományos mértékegységekben.

1 és 7 közötti pozitív attribútumértékek támogatottak.

  • arc – a címkén belüli betűtípuscsalád beállítására szolgál . Számos érték támogatott, vesszővel elválasztva.

Csak a párosított betűtípuscímke részei között található szöveg formázódik. A szöveg többi része a szabványos alapértelmezett betűtípussal jelenik meg.


A html-ben is számos párosított címke található, amelyek csak egy formázási szabályt határoznak meg. Ezek tartalmazzák:
  • — félkövér betűtípust állít be a html-ben. Címke működésében hasonló az előzőhöz;
  • — a méret nagyobb, mint az alapértelmezett;
  • — kisebb betűméret;
  • — dőlt szöveg (dőlt betű). Hasonló címke ;
  • — aláhúzott szöveg;
  • - kihúzott;
  • — csak kisbetűvel jelenítse meg a szöveget;
  • - nagybetűvel.

Egyszerű szöveg

Miniatűr

Miniatűr

Több, mint máskor

A szokásosnál kevesebb

Dőlt betűs

Dőlt betűs

Aláhúzással

Kihúzott

Stílusattribútumok képességei

A leírt címkéken kívül a html-ben a betűtípus megváltoztatásának több módja is van. Az egyik az általános stílus attribútum használata. Tulajdonságai értékeinek felhasználásával beállíthatja a betűtípus megjelenítési stílusát:

1) font-family – a tulajdonság beállítja a betűtípuscsaládot. Több érték felsorolása is lehetséges.
A html betűtípusának a következő értékre történő módosítása akkor történik meg, ha az előző család nincs telepítve a felhasználó operációs rendszerére.

Írás szintaxisa:

font-family: font-name [, font-name[, ...]]

2) font-size – a méret 1 és 7 között van beállítva. Ez az egyik fő módja a HTML betűtípusának növelésének.
Írás szintaxisa:

font-size: abszolút méret | relatív méret | jelentése | kamat | örököl

A betűméretet is beállíthatja:

  • pixelben;
  • Abszolút értelemben ( xx-kicsi, x-kicsi, kicsi, közepes, nagy);
  • százalékban;
  • Pontokban (pt).

Betűméret: 7

Betűméret: 24 képpont

Betűméret: x-nagy

Betűméret: 200%

Betűméret: 24 pt


3) font-style – beállítja a betűtípus írási stílusát. Szintaxis:

betűstílus: normál | dőlt | ferde | örököl

Értékek:

  • normál – normál helyesírás;
  • dőlt – dőlt;
  • ferde – jobbra ferde betűtípus;
  • inherit – örökli a szülőelem helyesírását.

Példa a betűtípus megváltoztatására html-ben ezzel a tulajdonsággal:

font-style: inherit

font-style:dőlt

font-style:normal

font-style:ferde


4) font-variant – minden nagybetűt nagybetűvé alakít. Szintaxis:

font-variáns: normál | kisbetűs | örököl

Példa arra, hogyan lehet megváltoztatni a betűtípust a html-ben ezzel a tulajdonsággal:

font-variant: inherit

font-variant:normal

font-variant:small-caps


5) font-weight – lehetővé teszi a szöveg vastagságának (telítettség) beállítását. Szintaxis:

betűsúly: félkövér|félkövérebb|világosabb|normál|100|200|300|400|500|600|700|800|900

Értékek:

  • félkövér – a html betűtípust félkövérre állítja;
  • merészebb – a normálhoz képest merészebb;
  • világosabb – a normálhoz képest kevésbé telített;
  • normál – normál helyesírás;
  • 100-900 – beállítja a betűvastagságot számszerű egyenértékben.

font-weight:bold

font-weight:bolder

font-weight:lighter

font-weight:normal

betűsúly: 900

betűsúly: 100

html betűtípus tulajdonsága és betűszíne

A Font egy másik konténertulajdonság. Önmagában több, a betűtípusok megváltoztatására szolgáló tulajdonság értékeit egyesítette. betűtípus szintaxis:

font: font-size font-family | örököl

Az érték beállítható a rendszer által a különféle vezérlők címkéiben használt betűtípusokra is:

  • felirat – a gombokhoz;
  • ikon – ikonokhoz;
  • menü - menü;
  • üzenetdoboz – párbeszédpanelekhez;
  • kis felirat – kis vezérlőkhöz;
  • status bar – állapotsor betűtípusa.

Mit lát valójában a webhely látogatója, ha nem szabványos webes betűtípust használ a böngészőfejlesztés ezen szakaszában?

Sokan küzdenek a weboldal létrehozásával. Sok esetben egy webhely nem szabványos betűtípust vagy hieroglifát ír elő. Letölt egy gyönyörű betűtípust, és elkezdi elhelyezni az oldalt, de nem minden felhasználó rendelkezik ilyen betűtípussal. Vannak, akik nem jönnek zavarba, és egyszerűen létrehoznak egy grafikus fájlt a szükséges betűtípussal, de a további grafikák nem mindig illenek az oldalhoz, és sokaknak már elege van belőle. De van egy megfelelő kiút! Ez a megoldás a CSS technológia (Cascading Style Sheets) vagy egyszerűen „Cascading Style Sheets” használata. A CSS-t általában magában a létrehozott fájl, az oldal tartalmazza, de külön is létrehozhat egy CSS-fájlt (.css) és összekapcsolhatja a címkék közé írva. És így:

A CSS segítségével pedig automatikusan le kell töltenünk és telepítenünk kell a True Type Font (.ttf) betűtípusfájlt, de a telepítés csak akkor történik meg, ha a felhasználó számítógépe nem érzékeli a szükséges betűtípust. Először is meg kell adnunk a betűtípus helyét. Ehhez írunk a címkék közé ÉsÍgy:

Így bármilyen betűtípust használhat a webhelyén. De azt tanácsolom, hogy ne legyen túl kifinomult, mivel a betűtípus letöltésének és telepítésének folyamata is igényel némi időt. És ha maga a betűtípus „súlya” 500 kb vagy több, akkor ebben az esetben nem ajánlott használni.

Őszintén szólva, egyszerűbb és helyesebb ezt megtenni:


Bár a webes betűtípusokat a legtöbb böngésző támogatja, az Operában már a kezdetektől fogva hibásak. Egyes rendszereken egyáltalán nem működnek, azokon, amelyek működnek, az oldalak újratöltésekor működhetnek vagy nem:

Ezért ezt komoly projektekben nem lehet használni, csak személyes blogokban, és csak 30px-nél nagyobb szövegeknél, hogy ne lássuk az élsimítás és kerning csodáit.

Ugyanakkor a Google API-t biztosít a nem szabványos betűtípusok böngészők közötti összekapcsolásához.







Tedd szebbé a webet!



A Google észleli a böngészőt, és érvényes CSS-t és betűtípust biztosít számára.

A következő projektben ismét nem szabványos betűtípussal látok címsorokat és menüket. Készítsd el képekkel? Szívás: esetlen, rugalmatlan, lassú. Vaku? Nem bírom őt. Javascript? Egyelőre természetesen a legjobb megoldás, de ez még mindig a böngészők korlátaira emlékeztető mankó. Ideje belemélyedni a szabványokba: mit kínálnak és hol működik már.

A jegyzet

Ezzel szemben az egyéni betűtípus olyan betűtípus, amely valószínűleg hiányzik a webhely látogatói közül.

Feladat

Valósítson meg egyéni betűtípust képek, JavaScript vagy flash használata nélkül. Csak a legújabb fejlesztéseket használjuk a .

Megoldás

De az IE esetében ez nem ilyen egyszerű. Bár ez volt az első, amely támogatta a harmadik féltől származó betűtípusok megvalósítását (1997 óta az Internet Explorer 4. verziójával!!!), ehhez speciális formátumra van szükség a betűtípushoz - EOT (Embedded OpenType). Az EOT formátum egyszerre két problémát old meg:

  • tömöríti a font fájlt, így a súlya többszörösére csökken (a kollégák tesztjei alapján ez a módszer jobban tömörít, mint a RAR, ZIP és gzip módszerek)
  • titkosítja a fájlt: az információ beíródik a fontfájlba, ahol használni kell. Ez a betűtípus nem fog működni ezen a címen kívül.

Ennek eredményeként a betűtípus stílusokban történő összekapcsolása így fog kinézni:

/* csak Internet Explorer esetén */ @font-face ( font-family: Scriptorama; src: local("Scriptorama"), url(path-to/Scriptorama.eot); ) /* tovább minden más böngészőhöz */ @ font-face ( font-family: Scriptorama; src: local("Scriptorama"), url(útvonala/Scriptorama.ttf); ) [...] h1 ( font-family: Scriptorama, arial; font-weight: Normál;

Feltörés helyett használhatja a .

frissítés 23.08.11 Egy teljesebb betűtípus-beágyazási szintaxis, amely figyelembe veszi néhány lehetséges IE-hibát és nagyobb böngészőtámogatást:

@font-face ( font-family: "JournalRegular"; src: url("journal-webfont.eot"); src: url("journal-webfont.eot?#iefix") format ("embedded-opentype"), url("journal-webfont.woff") format("woff"), url("journal-webfont.ttf") format("truetype"), url("journal-webfont.svg#JournalRegular") format("svg" "); betűsúly: normál; betűstílus: normál; )

A jegyzet

frissítés 10.11.10 Előfordulhat, hogy IE-ben a helyi nem működik. Sőt, emiatt előfordulhat, hogy a betűtípus egyáltalán nem csatlakozik. Projektjeink során erre a pontra figyelünk: ha nem működik, egyszerűen eltávolítjuk az IE local számára.

Előnyök:

  • rugalmasság - a webhely tulajdonosa tetszés szerint módosíthatja a szövegeket;
  • gyors betöltési sebesség - minimális számú külső fájl tetszőleges mennyiségű szöveggel, nem szabványos betűtípussal;
  • a webhely maximális sebessége - nulla további elem a DOM-struktúrában, nulla szkript és flash objektum, amely lassítja a webhelyet;
  • a szöveg szövegként viselkedik (végül is szöveg marad), i.e. kiemelkedik, reagál a színváltozásokra, merészségre, stílusra stb., ideális SEO;
  • Meglehetősen egyszerű megvalósítás, még a betűtípus-optimalizálást is figyelembe véve.

Hibák:

Betűtípus tömörítés és konvertálás

Ha a betűtípus-fejlesztők igyekeztek mindenkinek tetszeni, akkor a betűtípus valószínűleg sok-sok karaktert tartalmaz, és ennek megfelelően sok-sok súlyú. Tehát az Arial Unicode MS font 51 ezer karaktert tartalmaz és több mint 23 megabájtot nyom! Ideje elgondolkodni azon, hogy az oldal udmurt vagy finnugor nyelveket használ majd? És különféle kiegészítő szimbólumok, írásjelek és számok? Arra is figyelni kell, hogy minden betűtípusnak bizonyos számú stílusa van: normál, dőlt, félkövér, félkövér. Egy betűtípus legfeljebb 9 típusú félkövérséget tartalmazhat (ne felejtse el az elfogadható értékeket).

Mit kell tenni

A betűtípusból kizárunk mindent, ami a feladat eléréséhez nem szükséges. Például, ha a betűtípust csak a menühöz használják, akkor az írásjelek, a különféle kiegészítő szimbólumok és a számok feleslegesek lesznek.

Hogyan kell csinálni

A következők segíthetnek ebben:

Online szolgáltatás @font-face Generator

Mi lehet:

  • két üzemmód: Easy - azok számára, akik nem akarnak elmélyülni, és Expert - a maximális optimalizálás érdekében
  • különböző formátumú eredményeket, és ez egy helyen! Azok. nem kell először tömöríteni a True Type-t az összes böngészőhöz, majd külön konvertálni EOT-ra IE-hez
  • különböző lehetőségek az eredmények eléréséhez. Egészen addig, amíg megvédi a betűtípust a helyi használattól és a Cufon fájlt!
  • a karakterek pontos kiválasztása tömörített betűtípushoz. Megadhatja a nyelvet és további karakterkészletet, vagy megadhatja a használt karakterek tartományát, vagy egyszerűen felsorolhatja a szükséges karaktereket, vagy használhatja az összes módszer szimbiózisát
  • a CSS-ben gyengék számára még stílusszabályok is kialakulnak

A kísérlethez egy 145 Kb-os fontot tömörítettem a „Use for menu” tesztfeladattal. Csak kis orosz betűket hagytam. A végső betűméret 8 Kb volt. Elképesztő!

Hibák:

  • Az EOT úgy jön létre, hogy nem kötődik egy adott domainhez (komoly projektek esetén továbbra is külön kell elvégeznie az EOT-t)
  • nem minden engedélyezett betűtípust lehet feldolgozni (ez viszonylagos hátrány)

Benyomás- fantasztikus, kiváló, szuper-duper, csodálatos!!! Szerzek magamnak egy PayPal-t, hogy adományozhassak.

Webes betűtípus-optimalizáló

Egy online szolgáltatás, amely lehetővé teszi, hogy csak a szükséges karaktereket hagyja meg. Működik .

Előnyök: egyszerű és világos. Az eredmény egy True Type tömörített betűtípus, egy EOT betűtípus az IE-hez és egy CSS-kód a csatlakozáshoz.

Hátránya: a szolgáltatás csak a webhelyükön található, szigorúan rögzített betűtípuslistához érhető el.

VESZTÉK

Szoftver a Microsofttól. Segít átalakítani a betűtípust EOT-vé. A Plus lehetetlenné teszi a betűtípus használatát a megadott webhelyen kívül. Letölthető és részletesebben is megismerkedhet a forgatókönyvnek szentelt oldalon.

TTF2EOT

A névből egyértelműen kiderül, hogy egy betűtípust TTF-ről EOT-ra konvertál. Helyben működik a parancssoron keresztül, ami önmagában nem kényelmes. A forgatókönyvet letöltheti, és többet olvashat róla a projekt honlapján.

Online Font Converter

Könnyen használható, lehetővé teszi a licencelt betűtípusok konvertálását. Elérhető.

Hátrányok: regisztráció szükséges.

Mi a helyzet a fontvédelemmel?

Ha a betűtípus jó minőségű, akkor azt magas szakemberek, gyakran egy profi csapat fejlesztik, gyakran több mint egy hónapra. Egy ilyen betűtípus nem kevesebbe kerülhet, mint a „Zhiguli” a futószalagról. A betűtípus-fejlesztők elkezdték védjegyként bejegyeztetni őket, ezzel biztosítva a szerzői jog tulajdonosának a betűtípushoz fűződő jogait az iparjogvédelem szintjén.

Azok. Ahhoz, hogy egy betűtípust használhasson az interneten, a webhely tulajdonosának meg kell vásárolnia a betűtípust az interneten való használat jogával. De az beszerzés a probléma fele. A betűtípust is meg kell védeni az illegális másolástól. Szinte nincs ilyen probléma, ha az oldalon található licencelt betűtípus képekkel vagy Javascript használatával van megvalósítva. De ha @font-face-en keresztül valósítja meg, a betűtípus nyíltan található a szerveren, amelyet bármely felhasználó letölthet. Ez pedig már perekkel fenyeget.

A jegyzet

Kis oldalak millióinál a betűtípusok illegális használata következmények nélkül elmúlik és elmúlik, de a menő, kereskedelmi, különösen nemzetközi projekteknek komolyan el kell gondolkodniuk a licencek vásárlásán.

Hogyan lehet megvédeni egy betűtípust?

Az IE esetében ez a probléma azonnal megoldódott - az EOT formátum titkosítja a fájlt. Ennek eredményeként van egy betűtípusunk, amely csak ezen az oldalon fog működni.

A minap ismét úgy döntöttem, hogy elkezdek fekvőtámaszt csinálni. Egy tanár, akit tisztelek, azt állítja, hogy ennek a gyakorlatnak szinte varázslatos hatása van, ha helyesen végzik el.

Nos, beállítottam egy kísérletet magamon, és hogy nehezítsem a leugrást, úgy döntöttem, nyilvánossá teszem a „laboratóriumi füzetet”, és felraktam egy elhagyott blogra.

A régi terv nem illett az új ötlethez, és habozás nélkül kivettem a WordPress általános tárházából azt, amelyik többé-kevésbé tetszett.

Tudod mi a probléma néhány onnan vett kész sablonnal? A probléma a cirill betűtípusokkal való ügyetlen kompatibilitás. Az én esetemben a fejlécek szenvedtek. Mivel a CSS által hivatkozott betűtípus nem tartalmazott orosz karaktereket, azokat az alapértelmezett betűtípusból (Sans vagy Arial) vettük át. Ennek eredményeként a főcímek HATALMASak voltak, és tönkretették az egész megjelenést. gondolkodnom kellett hogyan cserélje ki a betűtípust.

Ennek többféle módja van.

1. módszer: Buta

Ez abból adódik, hogy megtalálja a megfelelő betűtípust az interneten, telepíti a számítógépére, írja be CSS-be, és látja a webhelyét a kívánt módon.

Mások továbbra is a legjobb esetben alapértelmezett betűtípusokkal látják, és a legrosszabb esetben szétszórtan is.

Ne csináld ezt!

2. módszer: Alakítsa át a tervet szabványos betűtípusra

Ez a legideálisabb lehetőség, de sajnos nem mindig megfelelő, mert néha elveszik emiatt a dizájn „íze”. Azonban MINDIG fontolja meg ezt a megközelítést, mert bármennyire is próbálkozik, lehetséges, hogy az ügyfélszámítógép továbbra is a rendelkezésre álló betűtípust fogja használni.

A szinte minden operációs rendszeren elérhető biztonságos betűtípusok: Verdana (ideális szövegekhez),Hatás (néha nagyon jó a címekben), Arial, Arial Black, Comic Sans MS (kaka, ami nagyon népszerű a kezdők körében), Futár Új (alkalmas kódpéldákhoz és űrlapokhoz), Georgia, Times New Roman, Trebuchet MS.

3. módszer: Szöveg helyett kép

Az opció nagyon átívelő, és alkalmas statikus elemek tervezésére. Például a webhely fejlécei. Csinálsz egy átlátszó PNG-t a kívánt betűtípusú szöveggel, szükség szerint feldolgozod és beszúrod az oldalra, nem felejtve el kitölteni az ALT-t. Vagy ugyanaz, de illessze be a szöveget valamilyen háttérre, és mentse el JPG formátumban.

A fejléc mellett meg kellett változtatnom a bejegyzésfejlécek és a widgetek megjelenését is. Nos, miért nem csinálsz minden bejegyzéshez külön képet címmel?

Bár vannak olyan mesteremberek, akik szerverszkriptek segítségével állítanak elő képeket címszöveggel, ez már perverzió.

4. módszer: Cufon

Ezeket a kisalkalmazásokat a http://cufon.shoqolate.com/generate/ online generátor segítségével lehet előállítani fontfájlból

A legegyszerűbb módja a használata http://www.google.com/fonts Kiválasztja a kívánt betűtípust a bemutatottak közül, és kész kódot kap, amelyet be kell illesztenie a webhelyre (a fejbe és a stílusfájlba), amely után minden működik.

De nem akartam extra javascriptet használni, kisalkalmazások generálásával foglalkozni stb. Mindent gyorsan és egyszerűen akartam csinálni. Ráadásul a fájl a kívánt betűtípussal már régóta elérhető volt.

4. módszer: Csatlakoztassa a betűtípust a webhelyhez CSS használatával

Az internet tele van útmutatókkal ebben a témában. Azonban ötöt kipróbálva katasztrofális eredményre jutottam. A TTF betűtípusom csak az IE-ben jelent meg normálisan. Más böngészőkben könyörtelenül az Arial váltotta fel.

Bevallom, hogy nem vagyok rajongója az IE-nek, és böngésző letöltési böngészőnek tartom. Nem több! Szóval egy kis fejlesztést kellett végrehajtanom.

Ahhoz, hogy egy betűtípust a webhelyhez csatlakoztassunk CSS használatával, magára a betűtípusra (fájlra) és egy online konverterre van szükségünk: http://onlinefontconverter.com/

Az online betűtípus-konverterek széles választéka létezik. Némelyik le van zárva, újak jelennek meg a helyükön, így ha ez a bizonyos már nincs meg, akkor keressen a keresőkben olyan lekérdezést, mint az „online font konverter”, és ott próbálja meg konvertálni a betűtípusokat. Ebben a bejegyzésben az adott konvertereket használjuk példaként.

1. Nyissa meg a konverter webhelyét , fogja meg a meglévő betűtípust, és húzza be ebbe az ablakba (általában a jobb oldali oszlopban található).

2. Töltse le a betűtípust 4 változatban: EOT, OTF, TTF és WOFF. Ennek elégnek kell lennie. A böngésző az oldal megjelenítése során kiválasztja és letölti a számára kényelmesebbet.

3. Betűtípusok feltöltése a weboldalra. Ehhez létrehoztam egy mappát az oldal gyökerében "f"és odahelyezte őket.

Frissítés 2015.02.16.:Átmenetileg onlinefontconverter.comátdolgozta, és nem konvertálta egyik javasolt betűtípust sem ((

A font2web.com oldalt kellett használnom. Ez egyszerre biztosítja az összes szükséges betűtípust egy csomagban, egyetlen archívumban. Kényelmes!

4. Csatlakoztassa a betűtípusok betöltését a webhelyhez. Ehhez írja be ezt a kódot a css fájlba, vagy a megfelelő stíluscímkékbe.

@font-face( font-family: EtoMoiFont; src: url(/f/myFont1.eot), url(/f/myFont1.otf), url(/f/myFont1.ttf), url(/f/myFont1. woff);

font-család: EtoMoiFont;— közli a böngészővel, hogy mi lesz a betöltött betűtípus neve. Találj ki magának egy nevet.

src: url(/f/myFont1.eot), url(/f/myFont1.otf), url(/f/myFont1.ttf), url(/f/myFont1.woff);— megadja a fontfájlok elérési útját és nevét.

Miért ebben a sorrendben vannak a betűtípusok?

Az első Teszek EOT. Ezt a formátumot az IE régebbi verziói használják.

MásodikOTF. Ez egy tömörített betűtípus, amelynek kisebb súlyúnak kell lennie.

HarmadikTTF. Szinte minden böngésző megérti. Bár ez másként történik. Például iOS-en előfordulhat, hogy nem nyílik meg.

UtolsóWOFF. Ez jól olvasható Mac-eken, de még nem volt időm megnézni.

5. Jelölje ki a stílusfájlban , mely betűtípuscsaládot érdemes használni a címsorok (esetünkben a címsorok) megjelenítéséhez h2).

h2(betűcsalád: EtoMoiFont;)

Kész!

Ha a betűtípusok nincsenek alkalmazva, győződjön meg: először is, hogy a css fájlt használja-e az oldal (néha alaphelyzetbe kell állítani a gyorsítótárat, néha másik css fájlt kell keresni), másodszor, hogy a betűtípust használja-e az osztály (id vagy címke) nincsenek letiltva egy másik css fájlban, amely ezután betöltődik.

Ennek a módszernek az a szépsége, hogy a jövőben bármilyen szövegtárolóhoz be tudom állítani ezt a betűtípust.


Ez történt.

A módszer hátránya, hogy egyes paranoiás felhasználók böngészőbeállításai megtilthatják a külső fontok, flash, javascript, képek stb. betöltését.

Szóval ne légy lusta és ellenőrizd hogyan fog kinézni webhelye, ha letiltják a betöltött betűtípusokat. Próbálj meg biztonságosakkal játszani 2. módszer, majd töltse be újra a sajátját. Ha a méretek többé-kevésbé azonosak, és semmi sem mozdult el egymástól, akkor ez rendben van.

És tovább! Tesztmódszerek csak azokon a számítógépeken, amelyeken nincs telepítve a használni kívánt betűtípus. Különben menni fog 1. számú módszer.

Ez minden. veled voltam.
A következő alkalomig.

Új betűtípus hozzáadása egy webhelyhez nem a legegyszerűbb feladat. Hol lehet választani, letölteni és hogyan adhatunk betűtípust egy webhelyhez CSS-ben? Ebben a cikkben bemutatunk egyet a legkényelmesebb hogyan telepítheti és csatlakoztathatja a betűtípust a webhelyhez.

Hogyan lehet betűtípust felvenni egy webhelyre CSS-ben

Például van egy betűtípusunk Raleway.ttfés minden fejlécben használni akarjuk ( h1) webhelyünkön. Ehhez hajtsa végre a következő lépéseket:

h1 ( betűtípus család: "RalewayRegular"; }

Most a webhelyen található összes 1. szintű címsor a szükséges betűtípussal jelenik meg.

Ha több betűtípust (vagy azok stílusát) szeretne összekapcsolni, egyszerűen adja hozzá őket az előzőhöz:

@font-arc { betűtípus család: "RalewayRegular"; src: url("../fonts/RalewayRegular.ttf" ) formátum( "igazi típus"); betűstílus: normál; betűsúly: normál; } @font-arc{ betűtípus család: "RalewayBold"; src: url("../fonts/RalewayBold.ttf" ) formátum( "igazi típus"); betűstílus: normál; betűsúly: normál; }

Talán észrevette, hogy különböző betűformátumok léteznek - .ttf, .woff, .eot, .svg stb. A modern böngészők számára is létezik formátum. woff2, de erről a következő cikkek egyikében fogunk beszélni. Általában minden betűtípus egyszerre 3 formátumban szerepel. Ez azért történik, hogy a betűtípus helyesen jelenjen meg minden böngészőben, beleértve. és a régiek. Ez így néz ki:

@font-arc { betűtípus család: "RalewayRegular"; src: url( "../fonts/RalewayRegular/RalewayRegular.eot") ; src: url( "../fonts/RalewayRegular/RalewayRegular.eot?#iefix") formátum("embedded-opentype"), url( "../fonts/RalewayRegular/RalewayRegular.woff") formátum( "woff"), url( "../fonts/RalewayRegular/RalewayRegular.ttf") formátum( "igazi típus"); betűstílus: normál; betűsúly: normál; }

Itt következik Ügyeljen a csatlakozási sorrendre – ez fontos!

Nem megyünk bele a részletekbe, csak emlékezzünk ennek a kialakításnak a megjelenésére.

Ha csak egy formátumú betűtípusa van, használjon különböző betűtípus-konvertálókat. Íme az egyik közülük.


Betűtípus csatlakoztatása különféle szolgáltatások segítségével

A fonts4web szolgáltatást is használhatja a betűtípusok összekapcsolásához:


A betűtípusok összekapcsolásának legegyszerűbb módja


Betűtípus csatlakoztatása Moguta CMS-sablonhoz


Hogyan adhatunk hozzá Google-betűtípusokat tartalmazó hivatkozást egy Moguta CMS-sablonhoz


Most már tudja, hogyan adjon hozzá betűtípust egy webhelyhez CSS és egyebek használatával. Örömmel válaszolunk minden kérdésére

Ha hibát észlel, jelöljön ki egy szövegrészt, és nyomja meg a Ctrl+Enter billentyűkombinációt
OSSZA MEG: