Introduktion till CSS-teckensnittegenskaper
CSS-teckensegenskaper ger en översikt för teckensnittegenskaperna för CSS. Cascading Style Sheets, mer populärt känt som CSS, är ett enkelt designspråk som är utformat för att göra enklare att de producerande webbsidorna ser bra ut. CSS hanterar utseendet och upplever en del av en webbsida. Med CSS kan du styra färgen med texten, typsnitt för teckensnitt, avståndet mellan stycken, hur kolumnerna ska vara storlekar såväl som, presenterade, de bakgrundsbilder eller färger som används, layoutstilar, varianter i displayen flera enheter samt skärmstorlekar utöver ett antal olika effekter. CSS är enkelt att förstå och förstå, men det ger effektiv kontroll över demonstrationen av HTML-dokumentet. Oftast är CSS vanligtvis kombinerat med markeringsspråk HTML eller helt enkelt XHTML.
- CSS hänvisar till Cascading Style Sheets.
- CSS identifierar hur HTML-element ska visas på skärm, papper och även består av media.
- CSS sparar mycket arbete. Det kan styra layouten på flera webbsidor samtidigt.
- Externa formatmallar kommer att förvaras i CSS-filer.
Förklara olika CSS-teckensnittegenskaper
Nedan visas de olika CSS-teckensnittegenskaperna:
Teckensamling: I CSS kan du välja det teckensnitt du vill använda för texten inuti ett visst element genom att ställa in font-familjeegenskapen i en stilregel, men innan vi går in på detaljer om font-family måste vi förstå hur man använder teckensnitt eftersom vi inte alltid vet vad vår användare kommer att använda för att visa webbsidan när vi skapar en webbsida.
Definiera de fem teckensnittskategorierna i standard CSS
- Den första av dessa kategorier är kategorierna med serif-teckensnitt. Ett exempel på ett specifikt teckensnitt som skulle passa i denna kategori skulle vara Times eller Times New Roman samt Baskerville, Century och Schoolbook
- Det här är specifika typsnitt som Baskerville, Century och Schoolbook; det är teckensnittsnamnen som du kan se i en rullgardinslista när du väljer ett teckensnitt inuti en ordbehandlare eftersom ordbehandlaren vet exakt vad som är installerat på din maskin. Men för CSS skulle alla dessa teckensnitt falla under kategorin serif-teckensnitt.
- Det finns också en uppsättning sans-serif-teckensnitt och ett populärt teckensnitt som faller i denna kategori är Arial. Om du inte visste det, serif, så det finns små rader i slutet av en bokstav, får de bokstäverna att vara lite snygga och utsmyckade. Du kan se skillnaden i R-bokstäverna nedan.
- R till vänster är en Arial, som är sans-serif, bokstavligen utan utsmyckningar, medan R till höger är Times New Roman och den innehåller några extra små slag här och där. I allmänhet tycker människor att sans-serif-teckensnitten är lättare att läsa på en LCD- och LED-skärm.
- Det finns också kategorier för kuriva teckensnitt, som ser ut som handskrivna bokstäver och fantasisteckensnitt, som kan se ut som vad som helst, men de flesta mönster kommer inte att utnyttja dessa teckensnitt kraftigt eftersom de kan vara svåra att läsa och också lite oförutsägbar.
- Slutligen finns det en kategori för teckensnitt med ensamrätt. Det här är teckensnitten som ger lika avstånd till varje bokstav och det är förmodligen det teckensnitt som du vill använda i din textredigerare som du använder för att skapa CSS och även det teckensnitt som du vill använda på en webbsida för att visa kod i en webbsida.
Resultat i webbläsaren:
Produktion:
Resultat i webbläsaren:
Produktion:
Resultat i webbläsaren:
Produktion:
Resultat i webbläsaren:
Produktion:
Resultat i webbläsaren:
Produktion:
Teckensnittfamiljer
Nedanför förklaringen visar teckensnittfamiljerna:
- Många CSS-design kommer att ställa in font-familjeegenskapen till namnet på ett specifikt teckensnitt som Arial. Det finns dock alltid en chans att det specifika teckensnittet du vill ha som Arial, att det inte är tillgängligt på en given användares system. Och det är en av anledningarna till att du kan ange så många teckensnitt som du vill ha i en kommaseparerad lista och webbläsaren kommer att använda det första som matchar.
Enligt ovanstående skärmdump har vi ett första val, ett andra val och om inget av dessa teckensnitt är tillgängligt faller vi tillbaka till den generiska sans-serif eftersom även om webbläsaren inte har något av de andra teckensnitten måste den tillhandahålla ett standardteckensnitt för den kategorin. Naturligtvis väcker det frågan om vilka typsnitt som är säkra att använda för webbdesign. Generellt sett kan du inte gå fel med Arial, Verdana, Times och Courier, men vi har också tillhandahållit en lista här med andra teckensnitt som vanligtvis finns på flera plattformar.
- Helvetica är ett vanligt teckensnitt som du ser i många stilark, men Helvetica är inte tillgängligt i Windows. Windows ger Arial istället.
- Font-family är en av de egenskaper som ärvs. Så om vi ställer in den på kroppsnivå, så kommer parterna och diverna och ankarna som finns inuti kroppen att hämta den typsnittsfamiljen som standard om vi inte åsidosätter den. Så till exempel är den här rubriken här, den här h1-taggen, ärftande teckensnittfamiljen från kroppen, men det behöver inte vara så.
Produktion:
Vi kan säga att för h1 bör fontfamiljen vara Times New Roman, Serif och om uppdatera webbsidorna har förändringen återspeglats.
Storlekstorlek och format
Nedan följer detaljerad information om teckensnittstorlek och stilar:
- En annan egenskap hos teckensnitt som du vill kontrollera är storleken och när du ställer in storleken måste du först välja mellan absoluta eller relativa enheter.
- Absoluta storlekar anges vanligtvis i pixlar och pixlar ger dig mycket exakt kontroll över teckensnittsstorleken.
- Relativa enheter som procentsatser eller nyckelord större eller mindre eller ems, låter dig ställa in en teckenstorlek baserad på någon baslinje, så 2em skulle vara dubbelt så stor som baslinjen och 0. 8em skulle vara 80% av baslinjen. Många använder idag ems för relativ typsnittstorlek. En anledning är att relativa storlekar tillåter en användare att skala upp texten med sin webbläsare och det är något de kanske vill göra eftersom texten är svår för dem att se. Relativa storlekar låter det fungera.
Resultat i webbläsaren:
Produktion:
- Några av de andra egenskaperna för ett teckensnitt som du kan ställa in är teckensnittet för att tvinga kursiv typsnitt eller teckensnittets vikt att göra ett teckensnitt fet. Och egenskapen med teckensnittsvariant får ett typsnitt som endast använder stora bokstäver.
Resultat i webbläsaren:
Produktion:
- Det första vi vill göra är att betona det h1-elementet lite. Det måste vara ett h1-element eftersom det är den primära rubriken för den här sidan, men den är lite för stor för vår synvinkel. Så låt mig ställa in teckenstorlek till 1, 2ems. Det kommer att minska det lite för att en h1-tagg vanligtvis kommer att vara långt mer än 1, 2ems. Nästa nummer vi vill ta upp är kodlistan här. Vi vill att detta ska vara ett monospace-teckensnitt och det finns ett par olika vill uppnå detta. För kod enligt nedan.
Resultat i webbläsaren:
Produktion:
Resultat i webbläsaren:
Produktion:
Här vill vi använda förkod, vilket innebär att det är en förformaterad text och snälla försök inte manipulera den.
Resultat i webbläsaren:
Produktion:
Det är korta egenskaper för typsnitt. Som typsnitt med kursiv stil, typstorlek 0, 9em och font-familj serif;
Resultat i webbläsaren:
Produktion:
Slutsats
Hur man specificerar teckensnitt med CSS och skillnaden mellan ett specifikt teckensnitt som Arial och de generiska kategorierna för webbteckensnitt som serif och sans-serif. Vi hanterar även teckensnittsstorlek och för- och nackdelar med relativa storlekar jämfört med absoluta storlekar, slutligen använder vi teckensnittegenskaper och lär oss att ladda teckensnitt med teckensnittsfamiljen.
Rekommenderade artiklar
Detta har varit en guide till CSS Font Properties. Här har vi diskuterat olika CSS-teckensnittegenskaper och fem typsnittkategorier i standard CSS med webbläsares resultat och utgångar. du kan också gå igenom vår andra föreslagna artikel för att lära dig mer-
- Vad är CSS?
- Introduktion till CSS
- Karriär inom CSS
- Fördelar med CSS