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.
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.
1 és 7 közötti pozitív attribútumértékek támogatottak.
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.
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
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:
Betűméret: 7
Betűméret: 24 képpont
Betűméret: x-nagy
Betűméret: 200%
Betűméret: 24 pt
betűstílus: normál | dőlt | ferde | örököl
Értékek:
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
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
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:
font-weight:bold
font-weight:bolder
font-weight:lighter
font-weight:normal
betűsúly: 900
betűsúly: 100
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:
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.
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.
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 .
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:
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; )
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.
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).
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.
A következők segíthetnek ebben:
Mi lehet:
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:
Benyomás- fantasztikus, kiváló, szuper-duper, csodálatos!!! Szerzek magamnak egy PayPal-t, hogy adományozhassak.
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.
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.
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.
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.
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.
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.
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.
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!
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.
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ó.
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.
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.
Az első Teszek EOT. Ezt a formátumot az IE régebbi verziói használják.
Második — OTF. Ez egy tömörített betűtípus, amelynek kisebb súlyúnak kell lennie.
Harmadik — TTF. 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;)
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.
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 Moguta CMS-sablonhoz