Om du är en designer eller webbansvarig, snararebara vet hur man kan integrera CSS-teckensnitt. Om du är ägare till en liten blogg och bestämde dig för att dekorera din resurs och göra den unik, bör denna kunskap hjälpa dig. Men det är bättre att börja från början, att förstå vad kaskade stilark är, var man kan få teckensnitt och var man ska installera dem.
Så svaret på hur man ansluter ett CSS-teckensnitt tillEn webbplats måste börja med en beskrivning av själva det formella språket. CSS är ett kaskadformat formatmall. Detta språk används som en beskrivning av dokumentets utseende. Det fungerar i takt med markeringsspråket.
CSS arbetar för att påpeka de visuella funktionerna på sidor på Internet. Det senare bör baseras på speciella HTML- eller XHTML-markeringsspråk.
Vem behöver CSS?Anslut teckensnitt, ställa in färger, ordna block etc. är nödvändigt för webbansvariga, programmerare som arbetar med att skapa en webbplats. Den huvudsakliga uppgiften för kaskaderande stilark är att separera strukturen visuellt. Det vill säga, om HTML bildar ett solidt textblock, hjälper CSS att villkorligt "dekorera" detta block, markera element, tilldela parametrar.
Separation ger dokumenttillgänglighet, större flexibilitet och kontroll. Tillåter dig att bli av med komplexa och repeterbara innehållselement.
Innan du förstår hur du anslutertypsnitt i CSS, måste du förstå hur kaskaderande stilark synkroniseras med filen. Deras regler implementeras på samma språk. Själva formatmallen har förvärvat CSS-regler som de använder. Tabeller kan lokaliseras både i ett visuellt redigerbart dokument och i en separat fil med tillägget .css. En sådan fil innehåller vanligtvis bara kommandon och anteckningar till dem.
Så det blir tydligt att stilark kan anslutas på flera sätt. Låt oss överväga dem ytterligare.
Det finns fyra alternativ att hjälpa till.inkludera CSS-teckensnitt, tilldela en nyans, definiera block osv. Som nämnts tidigare kan en uppsättning regler finnas i en fil skriven i HTML. Men detta alternativ gillar inte många designers. Detta orsakas av det faktum att det i hela teamets duk är svårt att hitta beskrivande parametrar och hantera allt. Det är mycket lättare att tilldela stilar i ett separat dokument.
Om CSS finns separat ansluts de via -taggen. Det måste placeras i
och . I den här anteckningen måste du ange href-attributet, som visar filens adress med CSS.Om kommandona igen kompileras som en separat fil,Vi ansluter dem till webbdokumentet via @importdirektivet. Det måste skrivas mellan markeringarna . Omedelbart efter . Och det fjärde sättet involverar att placera reglerna i hjärtat av en av taggarna genom stilattributet. Då påverkar reglerna en separat parameter, som ligger inom gränserna för en viss text.
De första två metoderna markerade utseendet på externa stilark och den andra - interna.
Vad används teckensnitt för?Naturligtvis vill varje webbplatsägare att hans resurs inte bara ska vara vacker, utan också unik. Jag skulle vilja placera specialelement på sidorna som kan stå ut bland alla. Dessutom märker du ofta rubriker eller en meny med icke-standardskrivning.
Det finns många frågor om detta.Kanske använde webbansvariga den bild som ritats i Photoshop. Kanske detta alternativ visade sig tack vare Flash. Det finns ett alternativ som använde Javascript. Men som praxis visar är det första alternativet obekvämt och långsamt, det andra är föråldrat och det tredje är för förvirrat. För att skapa något nytt och vackert kan du försöka ansluta CSS-teckensnitt.
Det bör förstås att i vårt fall är teckensnittinte bara en viss stil, utan också en uppsättning av ett antal egenskaper som behövs för att kontrollera utseendet på texten. Du kan använda flera alternativ. Tilldela ett specifikt teckensnitt till rubriken, stycket, citatet, texttexten, menyn etc.
Trots att användaren har tillgång till en enormolika stilar, storlekar, vikter etc. är det viktigt att inte glömma läsbarheten. Bättre att undvika mycket virvar av olika stilar. Två teckensnitt på sidan räcker.
För att kunna välja stilfont använda font-family. Det är väldigt svårt att entydigt förstå om det finns ett visst teckensnitt på läsaren för din resurs. Det är bättre att ange alla samma typalternativ. I det här fallet väljer webbläsaren den som finns i användarens system.
Denna familj har ett antal betydelser. Familjenamn representeras till exempel av namnet på en teckensnittsfamilj. Det generiska familjevärdet definierar de fem största teckensnittsfamiljerna.
Familjen med typsnitt är ansvarig för stilvalet.Denna stil ärvs såväl som den tidigare. Betydelsen inkluderar vanlig eller kursiv och kursiv. Teckensnittsvariantstilen är ansvarig för små bokstäver. För mättnad använd font-vikt och så vidare. Teckensnittet kan tilldelas storlek och färg.
Förutom standardteckensnitt kan du användaicke-standardlösningar. De är vanligtvis mer unika och troligen kommer du inte att märka dem på konkurrenternas webbplatser. Du behöver inte använda bilder, javascript och flash för detta. Det räcker att ta regeln @ font-face. Det gör att användaren kan ladda en extern fil i ett dokument.
Denna metod gör det möjligt att ansluta ett CSS-teckensnittOTF och TTF. Dessa är speciella format som gör ett ganska bra jobb med att göra detta. Problem kan bara uppstå med Internet Explorer. Även om han började använda teckensnitt från tredje part redan 1997, har han nu strikta krav.
Han gör mycket för att förstöra ditt arbete. Det kan ofta komprimera en fil med ett teckensnitt, ibland kan den kryptera den. Därför förekommer alla slags hack.
Det finns flera teckensnittsformat nubehöver veta. Annars kommer du att möta ett antal inkonsekvenser och inkompatibiliteter. Du kan ansluta CSS TTF-teckensnitt. Det här formatet stöds nu av alla webbläsare. Ett undantag kan vara Internet Explorer version 8 och senare, samt Opera Mini 5.0-8.0.
Endast IE kan arbeta med EOT.Situationen med WOFF är densamma som med TTF. Men SVG fungerar i Chrome-webbläsare upp till version 37, liksom Safari, iOS Safari, Android-webbläsare. Som praxis visar är det bäst att använda TTF. Detta är det mest mångsidiga alternativet och orsakar sällan problem. Det är det vanligaste.
Så, för att ansluta teckensnittet till en avovanstående format, använd bara @ font-face-regeln vi pratade om tidigare. För att göra det tydligt måste du följa en specifik algoritm. Du har en teckensnittsfil som heter font.ttf. För att använda den för huvudtexten måste du först kopiera själva filen i mappen där alla platsfiler finns.
Om du vill använda mer än ett typsnitt kan du skapa en speciell mapp här där du laddar upp dem. Detta gör det mycket lättare för dig att hitta dem och ändra innehållet i en sådan mapp.
Nu måste vi få webbläsaren att ladda vårt teckensnitt på egen hand. För att göra detta måste du ge honom instruktioner. Vi använder @ font-face-direktivet. Vårt kommando kommer att se ut så här:
@ font-face {
font-family: MyUniqueFont;
src: url ("fonts / font.ttf");
}
Font-family-kommandot är ansvarigt för att säkerställa att teckensnittetfick sitt namn och efter det kunde det användas för att skriva stilen. Den andra raden innehåller en indikation på sökvägen där webbläsaren ska hitta stilen och ansluta den. Detta är inte en universell adress. Den här sökvägen kommer att skilja sig beroende på var du placerade teckensnittsfilen. Detta visar hur du tar med ett CSS-teckensnitt från en mapp.
Om du inte vet hur man ansluter fleraCSS-teckensnitt, det finns också en instruktion om detta. Det låter dig ange flera filer samtidigt. Du kan till exempel ansluta ett dussin av dem. För att göra detta måste du använda regeln ovan @ font-face. Följ exemplet på hur du tidigare anslutit en fil från mappen, på samma sätt, från en ny rad, ange länkar till andra teckensnittsalternativ.
Om du har en WordPress-webbplats,att ansluta stilar är ännu enklare. När du behöver ändra rubrikstil behöver du bara logga in på adminpanelen. Leta efter "Temainställningar". Avsnittet "Typografi" har en hel lista med olika alternativ. Du behöver bara välja och spara ändringen.
Mycket ofta använder deGoogle Fonts-tjänst. Det är ett populärt verktyg för att välja och ansluta stilar. Det finns massor av typsnitt här. För att ansluta dem, gå bara till den officiella webbplatsen.
Du kommer att se en hel lista med exempel ochmöjlighet att experimentera. När du har lagt till den stil du vill glöm inte att välja det kyrilliska alfabetet om din resurs är på ryska. Då kan du välja storlek, stil eller omedelbart välja flera alternativ för alla tillfällen.
Därefter har du redo den kod du behöverinställt på CSS-fil. I det här fallet gäller också regeln om att lägga till metoder. Till exempel, om stilark presenteras i ett separat dokument skickas kommandot till första raden. Om du har formatmallar direkt i HTML-filen måste du lägga till den i taggen <style> och </style>.
Det är enkelt att lägga till nya teckensnitt på din webbplats.Det är viktigt att omedelbart bestämma metoder och alternativ. Beroende på vilket system din webbplats är på måste du tänka igenom dessa åtgärder. Om du har en egenskriven resurs finns det få alternativ i det här fallet. Om det till exempel på WordPress är den här åtgärden mycket enklare än det kan tyckas.
