Icke-standardtypsnitt i Blogger för bloggdesign. Vackert kalligrafiskt typsnitt på Blogspot, Blogger

God dag kära läsare. Idag vill jag prata om ett av sätten att installera ett icke-standardiserat kyrilliskt teckensnitt på din webbplats. Den här metoden lämplig för alla webbplatser, inklusive bloggar på Blogger. Denna metod har framgångsrikt använts på många engelskspråkiga webbplatser och används aktivt i premium WordPress- och Joomla-teman.

Därför att Eftersom de flesta av mina läsare bloggar på Blogger och WordPress, kommer jag att visa dig hur du installerar ett anpassat typsnitt på dessa bloggar. Samtidigt är metoden som beskrivs för Blogger lämplig för absolut alla webbplatser. Och för WordPress finns ett färdigt plugin. Men jag råder dig inte att rulla artikeln till relevanta beskrivningar, eftersom. för att konfigurera plugin-programmet behöver du all kunskap om denna metod.

Jag tänker på det här ögonblicket detta är ett av de mest populära sätten att installera ett icke-standardiserat kyrilliskt teckensnitt på webbplatsen, för det första på grund av den enkla installationen och för det andra på grund av stödet från olika webbläsare.

Har jag fascinerat dig tillräckligt? Det är dags att gå vidare till detaljerna.

Så den här metoden kallas Cufon. Det uppfanns av en utvecklare - Simo Kinnunen. Först skapade han en speciell fil som måste kopplas till webbplatsen. För det andra skapade han en generator som förvandlar vilket typsnitt som helst till JavaScript.

Metoden i sig är enkel att vanära, och senare kommer du att se den. Det svåraste här är exakt sökningen efter det önskade teckensnittet. Och jag är säker på att många av er som inte är aktiva användare grafiska redaktörer, som PhotoShop, har helt enkelt ingen aning om vilket typsnitt som ska laddas in i generatorn och var man kan få tag i ett sådant typsnitt. Detta är vad jag bestämde mig för att prata om mer i detalj.

Det är ingen hemlighet att en viss uppsättning teckensnitt är installerad på vilken dator som helst, i samma Word och andra program. Vi kan också självständigt installera nya typsnitt på vår dator, inklusive i vilket program som helst. För att göra detta behöver vi bara skriva in frasen i någon av sökmotorerna ladda ner kyrilliska teckensnitt och se till att teckensnitten vi hittade är i .ttf-format.

Efter att ha laddat ner det typsnitt du gillar i .ttf-format kan du installera det på din dator genom att helt enkelt öppna det.

Eller välj kommandot Installera med höger musknapp. Efter denna procedur kommer teckensnittet att visas i alla program som är installerade på datorn, där det vanligtvis tillhandahålls. De där. inga ytterligare åtgärder krävs. Den beskrivna metoden fungerar garanterat i Windows 7.

Installera absolut alla kyrilliska teckensnitt på webbplatsen i tre steg

Så vi har blivit ägare till ett vackert icke-standardiserat kyrilliskt teckensnitt och vill installera det på vår webbplats. Vad är våra handlingar?

Steg 1

Vi går till Cufons webbplats - cufon.shoqolate.com.
Klicka på länken i menyn - Ladda ner. Skriptsidan öppnas. Vi kopierar bara all kod, klistrar in den i anteckningsblocket och sparar den med tillägget .js. För mina läsare har jag förberett en färdig fil, den kan du ladda ner till din dator.

Var försiktig, från och med datumet för att skriva inlägget den 26 juli 2011 är versionen av skriptet 1.09i. Det är denna version nu på länken ovan.

Laddar upp skriptet till webbhotellet. Alla som bloggar på Blogger borde redan veta var man laddar upp en tredjepartsfil (), jag använder Googles webbplatser för detta.

Steg 2

Vi återvänder till Cufons webbplats till fliken Generator. Före oss är en sida med många inställningar. För att vara ärlig gick jag inte in på absolut alla inställningar, men under experimenten provade jag olika, och jag fick alltid det önskade resultatet.

Men jag har i alla fall förberett några skärmdumpar med grundläggande inställningar för att uppmärksamma dig på viktiga punkter.


Som du kan se finns det ett separat laddningsfönster för varje typ av typsnitt:

  • vanlig typsnitt
  • fetstil
  • normal kursiv stil
  • fet kursiv stil

Jag förstod inte helt varför det var så, men jag laddade det exakt där beskrivningen maximalt karakteriserade mitt typsnitt.

Till exempel visar skärmdumpen laddningen av ett handskrivet teckensnitt. Han är snedställd och ganska välmatad :).


Därefter markeras fältet med licensavtalet. Du måste markera rutan och därmed bekräfta att typsnittet du laddar upp är tillåtet att användas på webben av utvecklaren av just detta typsnitt. Här är frågan känslig, tyvärr, bland det stora utbudet av olika typsnitt på Internet vet vi själva inte exakt vilket typsnitt vi kan använda och vilka inte. Därför är det här föremålet helt på ditt samvete.

Nästa skärmdump.

  1. I det första fältet anger vi att vi vill visa stora och små bokstäver, samt siffror och skiljetecken.
  2. Det andra fältet är markerat som standard, jag har inte försökt ta bort det.
  3. I det tredje fältet, se till att välja de kyrilliska och ryska alfabeten.

Jag markerade en rad i blått – de som genererar typsnittet för WordPress sätter en bock här.
Och de sista inställningarna.

  1. Jag skrev inget i den första rutan, men jag tror att fältet är användbart ur den synvinkeln att om du anger de domäner som typsnittet ska användas på, så fungerar det helt enkelt inte på andra domäner.
  2. Jag förstår det i det övre fältet vi pratar om vilken teckenstorlek som kommer att gå som standard. Du kan godkänna inställningen, eller så kan du neka genom att markera rutan. Själv försökte jag på olika sätt och jag var nöjd med båda alternativen. Jag tror att det också beror på både typsnittet i sig och idén med malldesignern. Nästa punkt i fönster 2, generatorn själv rekommenderar att du stänger av den, förutsatt att du ska använda en liten teckenstorlek. Om möjligt är det bättre att sätta den sista bocken, eftersom. tack vare denna inställning är den genererade filen mindre, vilket utan tvekan kommer att påverka laddningen av teckensnittet till det bättre.
  3. Och slutligen ett avtal med användarvillkoren för generatorn.

Som ett resultat får vi ytterligare en fil, som också laddas upp till hostingen.

Steg 3

Det enda som återstår är att ange i webbplatsmallfilerna före den avslutande taggen kod så här:

Som du kan se av koden, applicerar vi typsnittet på h1 rubriktaggen. Således kan du ange vilken annan tagg som helst så att den visar vårt kyrilliska teckensnitt.

Du kan också ange inte en tagg, utan en identifierare:

Men det är inte allt. Om du vill använda flera olika typsnitt på en sida samtidigt, går vi igenom steg två för alla nya typsnitt och specificerar dem alla:

Om du inte är säker på rätt stavning av ditt teckensnitt, öppna sedan motsvarande genererade fil från steg 2 och hitta den information du behöver.

Den som är markerad i blått är namnet på teckensnittet.
Så, på en av mina testbloggar var det ursprungligen så här.


Och det blev så här:

Hur man installerar ett anpassat kyrilliskt teckensnitt i WordPress

För WordPress-användare är det fortfarande mycket enklare. Naturligtvis kan du gå hela vägen beskrivet och typsnittet kommer också att fungera, men det finns även ett färdigt plugin som heter All-in-One Cufon. Du kan ladda ner plugin både från utvecklarens webbplats och direkt i bloggens adminpanel.


Installerar plugin. Aktivera. Gå till plugin-inställningar. Allra högst upp finns två varningsmeddelanden.


Den första är att du ska skapa en cufon-fonts-mapp i katalogen wp-content/plugins/. För att göra detta, anslut via FTP eller gå till värdkontrollpanelen och skapa en ny mapp i plugin-mappen som heter cufon-fonts. Därefter försvinner det första meddelandet.

Det andra meddelandet säger att du måste placera den genererade teckensnittsfilen i den skapade mappen, samma fil som vi får i Steg 2. Vi laddar filen och meddelandet försvinner, medan teckensnittet visas i inställningarna nedan, vilket plugin nu " ser".


Glöm inte att markera rutan bredvid typsnittet som du ska använda i mallen. Men typsnittet fungerar inte än. Nedan finns fältet Cufon Code, där vi måste ange vilken tagg som vårt kyrilliska teckensnitt ska tillämpas på. I det här fallet måste du ange en bar kod, utan några andra beteckningar.

replace("h1");


Förresten, det är värt att säga att om du har installerat WordPress tema med ett redan icke-standardtypsnitt, medan det inte har en kyrillisk stavning, måste du:

  1. Installera allt-i-ett Cufon-plugin.
  2. Installera det genererade teckensnittet.

Du behöver inte ange Cufon-koden i fältet nedan, som regel är denna kod redan skriven i mallen. Om du vill installera ett annat typsnitt, utöver det befintliga, måste en sådan post göras, som jag skrev i exemplen ovan.

En mycket viktig anmärkning.
Om du har optimerat rubrikerna i mallen enligt mina artiklar – och då ska du vara extremt försiktig. Om du kommer ihåg, på alla sidor utom den huvudsakliga, finns bloggtiteln i taggen (i länken). Du måste tilldela ett id eller en klass till denna tagg, till exempel:

Och sedan bör din Cufon-kod vara så här:

replace("h1");
cufon.replace(".mycufon1");

Följaktligen bör du göra detsamma för artikeltitlar.

Jag gratulerar dig, du har blivit ägare till ett icke-standardiserat, och man kan till och med säga unikt, kyrilliskt teckensnitt.

Det enda jag inte uppehöll mig vid var beskrivningen av CSS-stilar. Å ena sidan bevarades de stilar som jag redan hade på standardteckensnitten, efter att ha ersatt dem med Cufon-teckensnitt. De där. färg, storleken har inte ändrats. Å andra sidan upprepar de flesta stilar redan vanliga CSS-stilar, d.v.s. du kan klara dig med det du redan har. Om du vill experimentera kan du se alla CSS-inställningar i dokumentationen på den här sidan.
Det är allt. Jag önskar att du har de vackraste bloggarna i Runet.

Hur ändrar man typsnittet på din webbplats? Hur ansluter man offentliga typsnitt från Google Fonts-biblioteket, och vad händer om typsnittet är exklusivt? Om frågorna är relevanta för dig, läs vidare.

Teckensnittsformat

Liksom andra filtyper finns typsnitt i olika format. Det finns flera dussin av dem totalt, och TTF, EOT, WOFF och SVG anses vara de mest populära av de som används i nätverket. Dessutom stöds var och en endast av vissa versioner av programvaran.

Förutom att de tillhör specifika system skiljer de sig åt i karaktärsrenderingsteknik och komprimeringsmetod. Volymen på den mottagna filen beror på den senare, vilket direkt påverkar tiden för nedladdningen och därmed sidvisningshastigheten. Detta är endast kritiskt när du installerar ett nytt typsnitt, eftersom filen som innehåller den kommer att lagras i cachen efter nedladdning. För tillfället, när du bäddar in ett specifikt teckensnitt på en webbplats, är det nödvändigt att förbereda alla dessa teckensnittsformat: TTF (eller OTF), WOFF, EOT och SVG .

Ansluter Google Fonts

För att göra det enklare att arbeta med typsnitt skapade Google tjänsten Fonts, som innehåller flera hundra typsnitt, inklusive dussintals kyrilliska typsnitt.

Efter att ha valt önskade teckensnitt, och det kan finnas flera av dem, bildar tjänsten ett minimerat fönster med lägena "standard" och "import", som var och en har två typer av kod:

  • lägg till special. en rad till HTML-dokumentets titel mellan taggarna + skriv önskad kombination i CSS-filen;
  • eller skriv en annan rad mellan taggarna