I html spelar teckenstorleken en viktig roll. Det låter dig uppmärksamma användaren på viktig information som publiceras på webbplatsens sida. Även om inte bara storleken på bokstäverna är viktig, utan också deras färg, tjocklek och till och med familj.
Hypertextspråk har ett brett utbud av verktyg för att arbeta med typsnitt. När allt kommer omkring är textformatering huvuduppgiften för html.
Anledningen till skapandet av HTML-språket var problemet med att visa textformateringsregler i webbläsare.
Positiva attributvärden från 1 till 7 stöds.
Endast texten som finns mellan delarna av den parade teckensnittstaggen formateras. Resten av texten visas i standardtypsnittet.
Vanlig text
Fet text
Fet text
Mer än vanligt
Mindre än vanligt
Kursiv
Kursiv
Med understreck
Överstruken
Utöver de beskrivna taggarna finns det flera sätt att ändra typsnittet i html. En av dem är att använda det generiska stilattributet. Med hjälp av värdena för dess egenskaper kan du ställa in visningsstilen för teckensnitt:
1) font-family – egenskapen anger teckensnittsfamiljen. Det är möjligt att lista flera värden.
Att ändra typsnittet i html till nästa värde kommer att ske om den tidigare familjen inte är installerad på användarens operativsystem.
Skriva syntax:
font-family: font-name [, font-name[, ...]]
2) font-size – storleken är inställd från 1 till 7. Detta är ett av de viktigaste sätten att öka teckensnittet i HTML.
Skriva syntax:
font-size: absolut storlek | relativ storlek | betydelse | intresse | ärva
Du kan också ställa in teckenstorleken:
Teckenstorlek: 7
Teckenstorlek: 24px
Teckenstorlek: x-stor
Teckenstorlek: 200 %
Teckenstorlek: 24 pkt
teckensnitt: normal | kursiv | snett | ärva
Värden:
Ett exempel på hur du ändrar typsnittet i html med den här egenskapen:
font-style:herit
font-style:kursiv
font-style:normal
font-style:oblique
teckensnittsvariant: normal | små kepsar | ärva
Ett exempel på hur man ändrar typsnittet i html med denna egenskap:
font-variant:herit
font-variant:normal
font-variant:small-caps
font-weight: fet|fjärvare|lättare|normal|100|200|300|400|500|600|700|800|900
Värden:
font-weight:bold
font-weight:bolder
font-weight:lighter
font-weight:normal
teckensnittsvikt:900
font-weight:100
Font är en annan behållaregenskap. Inuti sig kombinerade den värdena för flera egenskaper avsedda för att ändra teckensnitt. teckensnittssyntax:
font: font-size font-family | ärva
Värdet kan också ställas in på de teckensnitt som används av systemet i etiketterna på olika kontroller:
Vad ser en webbplatsbesökare egentligen när han använder ett icke-standardiserat webbteckensnitt i detta skede av webbläsarutvecklingen?
Många människor kämpar när de skapar en webbplats. I många fall kräver en webbplats användning av ett icke-standardiserat teckensnitt eller hieroglyf. Du laddar ner ett vackert typsnitt och börjar lägga ut sidan, men alla användare har inte sådana typsnitt. Vissa människor skäms inte och skapar helt enkelt en grafisk fil med det typsnitt de behöver, men ytterligare grafik passar inte alltid sidan och många har redan tillräckligt med det. Men det finns en lämplig väg ut! Denna lösning är att använda CSS-teknik (Cascading Style Sheets) eller helt enkelt "Cascading Style Sheets". Vanligtvis finns CSS i själva den skapade filen, sidan, men du kan skapa en CSS-fil (.css) separat och koppla den genom att skriva mellan taggen
Således:Och med hjälp av CSS måste vi automatiskt ladda ner och installera teckensnittsfilen True Type Font (.ttf), men installationen kommer bara att ske om användarens dator inte upptäcker det önskade teckensnittet. Först och främst måste vi ange platsen för teckensnittet. För att göra detta skriver vi mellan taggarna
Och Så:På så sätt kan du använda alla typsnitt på din webbplats. Men jag råder dig att inte bli för sofistikerad, eftersom processen att ladda ner och installera typsnittet också kräver lite tid. Och om ditt teckensnitt i sig "väger" 500kb eller mer, så rekommenderas det inte att använda det i det här fallet.
Ärligt talat, det är enklare och mer korrekt att göra detta:
Även om webbteckensnitt stöds av de flesta webbläsare, i Opera är de buggiga från första början. På vissa system fungerar de inte alls, på de som fungerar, när sidorna laddas om kanske de fungerar eller inte:
Därför kan detta inte användas i seriösa projekt, bara i personliga bloggar, och endast för text större än 30px, för att inte se underverken med kantutjämning och kerning.
Samtidigt Google tillhandahåller ett API för anslutning över webbläsare av icke-standardiserade teckensnitt.
Gör webben vacker!
Google upptäcker webbläsaren och tillhandahåller giltig CSS och teckensnitt för den.
I nästa projekt ser jag återigen rubriker och menyer i ett icke-standardtypsnitt. Göra det med bilder? Suger: besvärlig, oflexibel, långsam. Flash? Jag tål honom inte. Javascript? Den bästa lösningen för nu, naturligtvis, men det är fortfarande en krycka som påminner oss om webbläsarnas begränsningar. Det är dags att gräva ner sig i standarderna: vad de erbjuder och var det redan fungerar.
Ett anpassat teckensnitt är däremot ett teckensnitt som sannolikt saknas hos de flesta webbplatsbesökare.
Implementera ett anpassat typsnitt utan att använda bilder, javascript eller flash. Vi använder endast de senaste framstegen inom .
Men för IE är det inte så enkelt. Även om det var det första som stödde implementeringen av typsnitt från tredje part (sedan 1997 med lanseringen av Internet Explorera fjärde version!!!), kräver det ett speciellt format för teckensnittet - EOT (Embedded OpenType). EOT-formatet löser två problem samtidigt:
Som ett resultat kommer koppling av typsnittet i stilar att se ut så här:
/* endast för Internet Explorer */ @font-face ( font-family: Scriptorama; src: local("Scriptorama"), url(path-to/Scriptorama.eot); ) /* vidare för alla andra webbläsare */ @ font-face ( font-family: Scriptorama; src: local("Scriptorama"), url(path-to/Scriptorama.ttf); ) [...] h1 ( font-family: Scriptorama, arial; font-weight: normal;
Istället för ett hack kan du använda .
uppdatering 23.08.11 En mer komplett syntax för inbäddning av teckensnitt som tar hänsyn till några möjliga IE-buggar och bättre webbläsarstöd:
@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 "); font-weight: normal; font-style: normal; )
uppdatering 10.11.10 I IE kanske lokalt inte fungerar. Dessutom, på grund av det, kanske typsnittet inte är anslutet alls. I våra projekt uppmärksammar vi denna punkt: om det inte fungerar tar vi helt enkelt bort det för IE lokalt.
Om teckensnittsutvecklarna försökte tillfredsställa alla, kommer typsnittet med största sannolikhet att innehålla många, många tecken och följaktligen väga många, många. Så typsnittet Arial Unicode MS innehåller 51 tusen tecken och väger mer än 23 megabyte! Det är dags att fundera på om sajten kommer att använda udmurtiska eller finsk-ugriska språk? Och även olika tilläggssymboler, skiljetecken och siffror? Du bör också vara uppmärksam på att varje typsnitt har ett visst antal stilar: vanlig, kursiv, fet, halvfet. Ett teckensnitt kan innehålla upp till 9 typer av fet stil (kom ihåg de acceptabla värdena).
Vi utesluter från typsnittet allt som inte är nödvändigt för att uppnå uppgiften. Till exempel, om teckensnittet endast används för menyn, kommer skiljetecken, olika ytterligare symboler och siffror att vara överflödiga.
Följande kan hjälpa till med detta:
Vad det kan:
För experimentet komprimerade jag ett 145 Kb-teckensnitt med testuppgiften "Använd för menyn". Jag lämnade bara små ryska bokstäver. Den slutliga teckenstorleken var 8Kb. Underbart!
Brister:
Intryck- fantastiskt, utmärkt, superduper, fantastiskt!!! Jag skaffar mig en PayPal att donera.
En onlinetjänst som låter dig bara lämna de nödvändiga tecknen. Fungerar.
Fördelar: enkelt och tydligt. Resultatet är ett True Type-komprimerat teckensnitt, ett EOT-teckensnitt för IE och CSS-kod för anslutning.
På nackdelen: tjänsten är endast tillgänglig för en strikt fast lista över typsnitt som de har på sin webbplats.
Programvara från Microsoft. Hjälper till att konvertera teckensnitt till EOT. Plus gör det omöjligt att använda typsnittet utanför den angivna webbplatsen. Du kan ladda ner och bekanta dig mer detaljerat på sidan som är tillägnad manuset.
Av namnet är det tydligt att det konverterar ett typsnitt från TTF till EOT. Det fungerar lokalt via kommandoraden, vilket i sig inte är bekvämt. Du kan ladda ner manuset och läsa mer om det på projektets hemsida.
Lätt att använda, låter dig konvertera licensierade teckensnitt. Tillgänglig.
Nackdelar: registrering krävs.
Om typsnittet är av hög kvalitet, är det utvecklat av högt yrkesverksamma, ofta av ett team av proffs, ofta under mer än en månad. Ett sådant typsnitt kan inte kosta mindre än "Zhiguli" från löpande bandet. Typsnittsutvecklare började registrera dem som varumärken och säkrade upphovsrättsinnehavarens rättigheter till typsnittet på nivån för skydd av industriell egendom.
Dessa. För att använda ett typsnitt på webben måste webbplatsägaren köpa typsnittet med rätt att använda det på webben. Men förvärvet är halva problemet. Teckensnittet måste också skyddas från olaglig kopiering. Det finns nästan inga sådana problem om det licensierade typsnittet på webbplatsen är implementerat med bilder eller använder Javascript. Men om du implementerar det via @font-face så ligger typsnittet öppet på servern som alla användare kan ladda ner. Och detta hotar redan med stämningar.
För miljontals små sajter kan och kommer den illegala användningen av typsnitt att passera utan konsekvenser, men coola, kommersiella, särskilt internationella projekt bör seriöst fundera på att köpa licenser.
För IE löstes detta problem omedelbart - EOT-formatet krypterar filen. Som ett resultat har vi ett typsnitt som bara fungerar på den här webbplatsen.
Häromdagen bestämde jag mig återigen för att börja göra armhävningar. En lärare jag respekterar hävdar att den här övningen har en nästan magisk effekt om den görs rätt.
Tja, jag satte upp ett experiment på mig själv, och för att göra det svårare att hoppa av, bestämde jag mig för att göra "laboratorie-anteckningsboken" offentlig och publicerade den på en övergiven blogg.
Den gamla designen stämde inte med den nya idén, och utan att tveka tog jag den jag mer eller mindre gillade från det allmänna WordPress-förrådet.
Vet du vad problemet är med några färdiga mallar hämtade därifrån? Problemet är klumpig kompatibilitet med kyrilliska teckensnitt. I mitt fall blev huvudena lidande. Eftersom teckensnittet som hänvisas till av CSS inte innehöll ryska tecken, togs de från standardteckensnittet (antingen Sans eller Arial). Som ett resultat var rubrikerna ENORMA och förstörde hela utseendet. Jag var tvungen att tänka hur man byter teckensnitt.
Det finns flera sätt att göra detta.
Det handlar om att du hittar ett passande typsnitt på Internet, installerar det på din dator, skriver det i CSS och ser din sida som det är tänkt.
Andra fortsätter att se det, i bästa fall, med standardteckensnitt, och i värsta fall till och med slut.
Gör inte det här!
Detta är det mest idealiska alternativet, men tyvärr är det inte alltid lämpligt, eftersom ibland "zest" i designen går förlorad på grund av det. Överväg dock ALLTID detta tillvägagångssätt, för oavsett hur mycket du försöker kan klientdatorn sluta använda det teckensnitt som finns tillgängligt.
Säkra typsnitt som finns på nästan alla operativsystem är: Verdana (perfekt för texter),Inverkan (ibland väldigt bra i rubriker), Arial, Arial Black, Comic Sans MS (kaka, som är väldigt populärt bland nybörjare), Courier Ny (lämplig för kodexempel och formulär), Georgia, Times New Roman, Trebuchet MS.
Alternativet är mycket webbläsare och lämpar sig för att designa statiska element. Till exempel webbplatsrubriker. Du gör en transparent PNG med text i önskat typsnitt, bearbetar den som du behöver och infogar den på sajten, glöm inte att fylla i ALT. Eller samma sak, men klistra in texten på någon bakgrund och spara den som en JPG.
Förutom rubriken behövde jag ändra utseendet på inläggsrubriker och widgets. Tja, varför inte göra en separat bild med en titel för varje post?
Även om det finns hantverkare som skapar bilder med titeltext med hjälp av serverskript, är detta redan en perversion.
Dessa appletar kan genereras från en teckensnittsfil med hjälp av onlinegeneratorn http://cufon.shoqolate.com/generate/
Det enklaste sättet är att använda http://www.google.com/fonts Du väljer önskat typsnitt bland de som presenteras och får färdig kod som du behöver infoga på sajten (i huvudet och i stilfilen), varefter allt fungerar.
Men jag ville inte använda extra javascript, bry mig om att generera applets, etc. Jag ville göra allt snabbt och enkelt. Dessutom hade filen med det önskade typsnittet redan varit tillgänglig länge.
Internet är fullt av guider om detta ämne. Men efter att ha provat fem av dem kom jag till ett katastrofalt resultat. Mitt TTF-teckensnitt visades normalt bara i IE. I andra webbläsare ersattes den skoningslöst av Arial.
Jag erkänner att jag inte är ett fan av IE och anser att det är en webbläsare för nedladdning av webbläsare. Inte mer! Så jag var tvungen att göra en liten förbättring.
För att ansluta ett teckensnitt till webbplatsen med CSS behöver vi själva teckensnittet (filen) och en onlinekonverterare http://onlinefontconverter.com/
Det kan finnas ett stort utbud av teckensnittsomvandlare online. Vissa är stängda, nya dyker upp på deras plats, så om just den här inte längre finns där, sök i sökmotorer efter en fråga som "online font converter" och försök konvertera typsnitten där. I det här inlägget används de givna omvandlarna som exempel.
1. Gå till konverterarens webbplats , ta tag i teckensnittet du har och dra det till det här fönstret (det finns vanligtvis i den högra kolumnen).
2. Ladda ner typsnittet i 4 varianter: EOT, OTF, TTF och WOFF. Detta borde räcka. Webbläsaren, i färd med att rendera sidan, kommer att välja och ladda ner den som är mer bekväm för den.
3. Ladda upp teckensnitt till webbplatsen. Jag skapade en mapp för detta i roten av webbplatsen "f" och placerade dem där.
Uppdatering 2015-02-16: För nu onlinefontconverter.com gjorde om och det konverterade inte något av de föreslagna typsnitten ((
Jag var tvungen att använda sajten font2web.com. Den här ger alla nödvändiga typsnitt på en gång i ett paket i ett arkiv. Bekväm!
4. Anslut teckensnittsladdning till webbplatsen. För att göra detta, skriv in den här koden i css-filen eller i lämpliga stiltaggar.
@font-face( font-family: EtoMoiFont; src: url(/f/myFont1.eot), url(/f/myFont1.otf), url(/f/myFont1.ttf), url(/f/myFont1. woff);
teckensnittsfamilj: EtoMoiFont;— berättar för webbläsaren vad det laddade teckensnittet kommer att heta. Kom på ett namn själv.
src: url(/f/myFont1.eot), url(/f/myFont1.otf), url(/f/myFont1.ttf), url(/f/myFont1.woff);— anger sökvägen och namnen på teckensnittsfiler.
Den första jag satte EOT. Detta format används av äldre versioner av IE.
Andra — OTF. Detta är ett komprimerat teckensnittsformat som ska väga mindre.
Tredje — TTF. Nästan alla webbläsare förstår det. Fast det händer annorlunda. Till exempel på iOS kanske den inte öppnas.
Sista — WOFF. Det här borde läsas bra på Mac, men jag har inte hunnit kolla det än.
5. Ange i stilfilen , vilken typsnittsfamilj som ska användas för att visa rubriker (i vårt fall rubriker h2).
h2(font-family: EtoMoiFont;)
Om typsnitten inte tillämpas, se till: för det första att css-filen används av webbplatsen (ibland behöver du återställa cachen, ibland leta efter en annan css-fil), för det andra att typsnittet används för klassen (id eller taggen) som du angett blockeras inte i en annan css-fil som laddas efter detta.
Det fina med denna metod är att jag i framtiden kan ställa in detta teckensnitt för vilken textbehållare som helst.
Detta är vad som hände.
Nackdelen med metoden är att webbläsarinställningarna för vissa paranoida användare kan förbjuda att ladda externa typsnitt, flash, javascript, bilder etc.
Så var inte lat och kolla hur din webbplats kommer att se ut om inlästa typsnitt är inaktiverade. Försök spela med säkra metod 2, och ladda sedan din igen. Om storlekarna är mer eller mindre desamma och ingenting har flyttats isär, så är det i sin ordning.
Och mer! Testmetoder endast på datorer där typsnittet du ska arbeta med inte är installerat. Annars löser det sig metod nummer 1.
Det är allt. Jag var med dig.
Tills nästa gång.
Att lägga till ett nytt typsnitt på en webbplats är inte den lättaste uppgiften. Var att välja, ladda ner och hur man lägger till ett teckensnitt på en webbplats i CSS? I den här artikeln kommer vi att visa en av det mest bekväma sätt att installera och ansluta typsnittet till webbplatsen.
Vi har till exempel ett typsnitt Raleway.ttf och vi vill använda det i alla rubriker( h1) på vår webbplats. För att göra detta, utför följande steg:
h1 ( teckensnittsfamilj: "RalewayRegular"; }
Nu visas alla 1:a nivås rubriker på sajten i det typsnitt vi behöver.
Om du vill koppla ihop flera typsnitt (eller deras stilar), lägg helt enkelt till dem under det föregående:
@teckensnitt { teckensnittsfamilj: "RalewayRegular"; src: url("../fonts/RalewayRegular.ttf" ) formatera( "truetype"); teckensnittsstil: normal; font-weight: normal; } @teckensnitt{ teckensnittsfamilj: "RalewayBold"; src: url("../fonts/RalewayBold.ttf" ) formatera( "truetype"); teckensnittsstil: normal; font-weight: normal; }
Du kanske har märkt att det finns olika teckensnittsformat - .ttf, .woff, .eot, .svg etc. Det finns även ett format för moderna webbläsare. woff2, men vi kommer att prata om det i en av följande artiklar. Vanligtvis ingår varje typsnitt i 3 format samtidigt. Detta görs för att typsnittet ska visas korrekt i alla webbläsare, inklusive. och gamla. Det ser ut så här:
@teckensnitt { teckensnittsfamilj: "RalewayRegular"; src: url( "../fonts/RalewayRegular/RalewayRegular.eot") ; src: url( "../fonts/RalewayRegular/RalewayRegular.eot?#iefix") format("embedded-opentype" ), url( "../fonts/RalewayRegular/RalewayRegular.woff") formatera( "woff"), url( "../fonts/RalewayRegular/RalewayRegular.ttf") formatera( "truetype"); teckensnittsstil: normal; font-weight: normal; }
Här följer Var uppmärksam på anslutningsordningen - detta är viktigt!
Vi kommer inte att gå in på detaljer, kom bara ihåg utseendet på denna design.
Om du har ett teckensnitt i endast ett format, använd då olika teckensnittskonverterare. Här är en av dem.
Hur man kopplar ett teckensnitt till en Moguta CMS-mall 
Nu vet du hur du lägger till ett teckensnitt på en webbplats med CSS och mer. Vi svarar gärna på alla dina frågor
