CSS Lettertype
CSS letter property defines the font family, size, boldness, style (such as italic) and deformation (such as small caps).
CSS Lettertype Series
In CSS zijn er twee verschillende types lettertype-namen:
- Algemene lettertypefamilie - een combinatie van lettertype-systemen met vergelijkbare uiterlijk (bijvoorbeeld "Serif" of "Monospace")
- Specifieke lettertypefamilie - specifieke lettertype (bijvoorbeeld "Times" of "Courier")
Behalve verschillende specifieke lettertypefamilie, definieert CSS 5 algemene lettertypefamilie:
- Serif-lettertypen
- Sans-serif-lettertypen
- Monospace-lettertypen
- Cursieve lettertypen
- Fantasy-lettertypen
Als je meer wilt weten over lettertypefamilie, lees dan: CSS Lettertype Series.
Specifieke lettertypefamilie
Gebruik font-family-eigenschap Definieer de lettertypefamilie van de tekst.
Gebruik van een algemene lettertypefamilie
Als je een sans-serif-lettertype wilt gebruiken voor het document, maar je maakt je geen zorgen over welk lettertype het is, dan is dit een geschikte verklaring:
body {font-family: sans-serif;}
De gebruikersagent zal dan een lettertype uit de sans-serif-lettertypefamilie (bijvoorbeeld Helvetica) kiezen en toepassen op het body-element. Omdat dit erfgenaam is, wordt deze lettertypekeuze ook toegepast op alle elementen die in het body-element zijn opgenomen, tenzij er een specifieker selector is die dit overschrijft.
Specifieke lettertypefamilie
Naast het gebruik van een algemene lettertypefamilie, kun je ook een specifiekere lettertype instellen via de font-family-eigenschap.
Het volgende voorbeeld stelt de Georgia-lettertype in voor alle h1-elementen:
h1 {font-family: Georgia;}
Dit regelstuk veroorzaakt ook een ander probleem, als de gebruikersagent geen Georgia-lettertype heeft geïnstalleerd, kan alleen de standaard lettertype van de gebruikersagent worden gebruikt om het h1-element weer te geven.
We kunnen dit probleem oplossen door een specifieke lettertype naam te combineren met een algemene lettertypefamilie:
h1 {font-family: Georgia,} serif;}
Als de lezer Georgia niet heeft geïnstalleerd, maar Times-lettertypen (een serif-lettertype in de serif-lettertypefamilie) wel, kan de gebruikersagent Times gebruiken voor het h1-element. Hoewel Times niet volledig overeenkomt met Georgia, is het ten minste voldoende dicht bij.
Daarom raden we aan om een algemene lettertypefamilie te bieden in alle font-family-regels. Dit biedt een uitweg, zodat een gebruikersagent een kandidaat-lettertype kan kiezen wanneer de specifieke lettertype die overeenkomt met de regel niet beschikbaar is.
Als je zeer vertrouwd bent met lettertypen, kun je ook een reeks vergelijkbare lettertypen voor de gegeven elementen specificeren. Om dit te doen, moet je deze lettertypen volgens prioriteit rangschikken en met een komma verbinden:
p {font-family: Times, TimesNR, 'New Century Schoolbook',}}
Georgia, 'New York', serif;}
Op basis van deze lijst zal de gebruikersagent deze lettertypen in de vermelde volgorde zoeken. Als alle vermelde lettertypen niet beschikbaar zijn, wordt er eenvoudig een beschikbaar serif lettertype gekozen.
Gebruik van aanhalingstekens
U heeft misschien al opgemerkt dat in de bovenstaande voorbeelden aanhalingstekens zijn gebruikt. Alleen wanneer de naam van het lettertype een of meerdere spaties bevat (bijvoorbeeld New York), of als de naam van het lettertype symbolen zoals # of $ bevat, moet er in de font-family verklaring aanhalingstekens worden gebruikt.
Ofwel aanhalingstekens of aanhalingstekens zijn acceptabel. Maar als een font-family eigenschap wordt geplaatst in de style eigenschap van HTML, dan moet men de aanhalingstekens gebruiken die niet door de eigenschap zelf worden gebruikt:
<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia, 'New York', serif;">...</p>
Lettertype stijl
font-style eigenschapWordt het meest gebruikt om oblique tekst te regelen.
Deze eigenschap heeft drie waarden:
- normal - tekst wordt normaal weergegeven
- italic - tekst wordt schuin weergegeven
- oblique - tekst wordt schuin weergegeven
实例
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
Het verschil tussen italic en oblique
font-style is zeer eenvoudig: gebruikt om tussen normal tekst, italic tekst en oblique tekst te kiezen. Het enige wat enigszins complex is, is om het verschil tussen italic tekst en oblique tekst te verduidelijken.
Italic is een eenvoudige lettertype stijl, die enige kleine aanpassingen aan de structuur van elke letter maakt om de veranderde uitstraling weer te geven. In tegenstelling daaraan is oblique tekst een schuin gepositioneerde versie van normaal verticale tekst.
Normaal gesproken, zien italic en oblique tekst er in webbrowsers volledig hetzelfde uit.
Lettertype vormen
font-variant eigenschapKleine kapitaals letters kunnen worden ingesteld.
Kleine kapitaals letters zijn geen normale kapitaals letters, noch kleine letters, deze letters gebruiken verschillende groottes van kapitaals letters.
实例
p {font-variant:small-caps;}
Letterdikte
font-weight eigenschapStel de dikte van de tekst in.
Gebruik de keyword bold om de tekst in vet te zetten.
De keywords 100 ~ 900 wijzen de 9 graden van vetdruk aan voor het lettertype. Als een lettertype deze vetdrukken bevat, worden deze cijfers direct gekoppeld aan de vooraf gedefinieerde niveaus, waarbij 100 overeenkomt met de fijnste lettervorming en 900 met de zwaarste lettervorming. Het cijfer 400 is equivalent aan normal, en 700 is equivalent aan bold.
Als de vetdruk van een element op bolder wordt ingesteld, zal de browser een vetder lettertype instellen dat ruimer is dan het geïnheerde waarde. In tegenstelling daaraan zal de keyword lighter de vetdruk verlagen in plaats van op te schalen.
实例
p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}
Lettergrootte
font-size eigenschapStel de tekstgrootte in.
Het vermogen om de grootte van tekst te beheren is belangrijk in het veld van webdesign. Maar je zou niet de tekstgrootte moeten aanpassen om een paragraaf eruit te laten zien als een titel, of een titel eruit laten zien als een paragraaf.
Gebruik altijd de juiste HTML-titels, zoals <h1> - <h6> om titels te markeren, en <p> om paragrafen te markeren.
De waarde van font-size kan een absoluut of relatief getal zijn.
Absoluut:
- Stel de tekst in op een specifieke grootte
- Laat gebruikers niet in alle browsers de tekstgrootte aanpassen (niet gunstig voor toegankelijkheid)
- Absoluut grootte is nuttig wanneer de fysieke afmetingen van de uitvoer zijn bepaald
Relatieve grootte:
- Stel de grootte in ten opzichte van de omringende elementen
- Laat gebruikers de tekstgrootte in de browser aanpassen
Opmerking:Als je de lettergrootte niet hebt ingesteld, is de standaardgrootte van gewone tekst (bijvoorbeeld paragrafen) 16 pixels (16px = 1em).
Gebruik pixels om de lettergrootte in te stellen
Door tekstgrootte in pixels in te stellen, kun je de tekstgrootte volledig controleren:
实例
h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}
In Firefox, Chrome en Safari kan de grootte van de tekst in de hierboven gegeven voorbeelden worden aangepast, maar dit werkt niet in Internet Explorer.
Hoewel het mogelijk is om de tekstgrootte aan te passen met de zoomfunctie van de browser, is dit eigenlijk een aanpassing van de hele pagina, niet alleen van de tekst.
Gebruik em om de lettergrootte in te stellen
Om problemen met aanpassen van tekst in Internet Explorer te vermijden, gebruiken veel ontwikkelaars de em-eenheid in plaats van pixels.
W3C 推荐使用 em 尺寸单位。
1em 等于当前的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素。在设置字体大小时，em 的值会相对于父元素的字体大小改变。
浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。
可以使用下面这个公式将像素转换为 em：pixels/16=em
（注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公式需改为：pixels/20=em）
实例
h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;} /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */
在上面的例子中，以 em 为单位的文本大小与前一个例子中以像素计的文本是相同的。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。
不幸的是，在 IE 中仍存在问题。在重设文本大小时，会比正常的尺寸更大或更小。
结合使用百分比和 EM
在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值：
实例
body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}
我们的代码非常有效。在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小。
CSS 字体实例：
CSS 字体属性
| 属性 | 描述 |
|---|---|
| font | 简写属性。作用是将所有针对字体的属性设置在一个声明中。 |
| font-family | Instellen van de lettertype serie. |
| font-size | Instellen van de grootte van het lettertype. |
| font-size-adjust | Intelligente schaalverdeling van vervangende lettertypen wanneer het voorkeuze lettertype niet beschikbaar is. (Deze eigenschap is verwijderd in CSS2.1.) |
| font-stretch | Horizontale uitrekking van het lettertype. (Deze eigenschap is verwijderd in CSS2.1.) |
| font-style | Instellen van de stijl van het lettertype. |
| font-variant | Weergeven van tekst in kleine hoofdletters of normale letters. |
| font-weight | Instellen van de dikte van het lettertype. |
