Arbeta med typsnitt och typsnittsegenskaper
Svep för att visa menyn
Typsnitt har stor inverkan på tonen och läsbarheten på en webbsida.
I detta kapitel går vi igenom de mest använda CSS-egenskaperna för typsnitt: font-family, font-size, font-weight och font-style.
Alla exempel använder samma text för att visa hur dessa egenskaper påverkar utseendet.
font-family
Egenskapen font-family anger vilket typsnitt som används för att visa text.
p {
font-family: 'Montserrat', Arial, sans-serif;
}
Flera typsnitt kan anges som reserv, separerade med kommatecken. Om det första typsnittet inte är tillgängligt används nästa i listan. Det rekommenderas att alltid inkludera en generell reserv som: serif, sans-serif, monospace.
font-size
Egenskapen font-size styr hur stor texten visas.
p {
font-size: 16px;
}
Vanliga enheter:
px: fast storlek;em: relativ till överordnat element;rem: relativ till rot-element.
font-weight
Styr tjockleken på texten. Numeriska värden: 100–900. Nyckelord: normal, bold, lighter.
font-style
Anger textens stil: normal, italic eller oblique.
Pseudoklass ::first-letter
::first-letter riktar in sig på det första bokstaven i ett element (vanligtvis ett stycke eller en rubrik), vilket möjliggör dekorativa eller stiliserade effekter.
selector::first-letter {
/* some styles */
}
Låt oss köra nästa exempel för att se hur det fungerar.
index.html
styles.css
font-family definierar typsnitt och reservtypsnitt.
font-size styr textstorleken i px, em eller rem.
font-weight justerar tjockleken med hjälp av siffror eller nyckelord.
font-style ändrar teckensnittsstilen.
::first-letter formaterar den första bokstaven i en textblock.
1. Vilken egenskap bestämmer tjockleken på teckensnittet?
2. Vad är standardvärdet för egenskapen font-style i CSS?
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
Arbeta med typsnitt och typsnittsegenskaper
Typsnitt har stor inverkan på tonen och läsbarheten på en webbsida.
I detta kapitel går vi igenom de mest använda CSS-egenskaperna för typsnitt: font-family, font-size, font-weight och font-style.
Alla exempel använder samma text för att visa hur dessa egenskaper påverkar utseendet.
font-family
Egenskapen font-family anger vilket typsnitt som används för att visa text.
p {
font-family: 'Montserrat', Arial, sans-serif;
}
Flera typsnitt kan anges som reserv, separerade med kommatecken. Om det första typsnittet inte är tillgängligt används nästa i listan. Det rekommenderas att alltid inkludera en generell reserv som: serif, sans-serif, monospace.
font-size
Egenskapen font-size styr hur stor texten visas.
p {
font-size: 16px;
}
Vanliga enheter:
px: fast storlek;em: relativ till överordnat element;rem: relativ till rot-element.
font-weight
Styr tjockleken på texten. Numeriska värden: 100–900. Nyckelord: normal, bold, lighter.
font-style
Anger textens stil: normal, italic eller oblique.
Pseudoklass ::first-letter
::first-letter riktar in sig på det första bokstaven i ett element (vanligtvis ett stycke eller en rubrik), vilket möjliggör dekorativa eller stiliserade effekter.
selector::first-letter {
/* some styles */
}
Låt oss köra nästa exempel för att se hur det fungerar.
index.html
styles.css
font-family definierar typsnitt och reservtypsnitt.
font-size styr textstorleken i px, em eller rem.
font-weight justerar tjockleken med hjälp av siffror eller nyckelord.
font-style ändrar teckensnittsstilen.
::first-letter formaterar den första bokstaven i en textblock.
Tack för dina kommentarer!
