Yazı tipi ile ilgili CSS Özellikleri

Articles

CSS'e Giriş

Bu makale, yazı tipi ile ilgili CSS özelliklerini açıklar.

font-style ve font-family gibi özelliklerin nasıl kullanılacağını ve yazılacağını öğrenebilirsiniz.

YouTube Video

Önizleme için HTML oluşturma

css-font.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-font.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>Font-Related CSS Properties Example</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Typography (Font-Related)</h2>
 20        </header>
 21        <article>
 22            <h3>font-size</h3>
 23            <section>
 24                <h4>Absolute Values</h4>
 25                <header><h4>font-size: 16px</h4></header>
 26                <section class="sample-view">
 27                    <p class="font-size-px">Font size: 16px</p>
 28                </section>
 29                <header><h4>font-size: 12pt</h4></header>
 30                <section class="sample-view">
 31                    <p class="font-size-pt">Font size: 12pt</p>
 32                </section>
 33            </section>
 34            <section>
 35                <h4>Relative Values</h4>
 36                <header><h4>font-size: 1.2em</h4></header>
 37                <section class="sample-view">
 38                    <p class="font-size-em">Font size: 1.2em</p>
 39                </section>
 40                <header><h4>font-size: 1.5rem</h4></header>
 41                <section class="sample-view">
 42                    <p class="font-size-rem">Font size: 1.5rem</p>
 43                </section>
 44                <header><h4>font-size: 150%</h4></header>
 45                <section class="sample-view">
 46                    <p class="font-size-percent">Font size: 150%</p>
 47                </section>
 48            </section>
 49            <section>
 50                <h4>Keywords</h4>
 51                <header><h4>font-size: small</h4></header>
 52                <section class="sample-view">
 53                    <p class="font-size-small">Font size: small</p>
 54                </section>
 55                <header><h4>font-size: medium%</h4></header>
 56                <section class="sample-view">
 57                    <p class="font-size-medium">Font size: medium (default)</p>
 58                </section>
 59                <header><h4>font-size: large</h4></header>
 60                <section class="sample-view">
 61                    <p class="font-size-large">Font size: large</p>
 62                </section>
 63                <header><h4>font-size: x-large</h4></header>
 64                <section class="sample-view">
 65                    <p class="font-size-x-large">Font size: x-large</p>
 66                </section>
 67            </section>
 68            <section>
 69                <h4>Relative Keywords</h4>
 70                <header><h4>font-size: smaller</h4></header>
 71                <section class="sample-view">
 72                    <p class="font-size-smaller">Font size: smaller</p>
 73                </section>
 74                <header><h4>font-size: larger</h4></header>
 75                <section class="sample-view">
 76                    <p class="font-size-larger">Font size: larger</p>
 77                </section>
 78            </section>
 79        </article>
 80        <article>
 81            <h3>font-family</h3>
 82            <section>
 83                <h4>Specific Font Names</h4>
 84                <header><h4>font-family: Arial, sans-serif</h4></header>
 85                <section class="sample-view">
 86                    <p class="font-family-arial">Font Family Arial</p>
 87                </section>
 88                <header><h4>font-family: Verdana, sans-serif</h4></header>
 89                <section class="sample-view">
 90                    <p class="font-family-verdana">Font Family Verdana</p>
 91                </section>
 92                <header><h4>font-family: "Times New Roman", serif</h4></header>
 93                <section class="sample-view">
 94                    <p class="font-family-times">Font Family Times New Roman</p>
 95                </section>
 96                <header><h4>font-family: "Courier New", monospace</h4></header>
 97                <section class="sample-view">
 98                    <p class="font-family-courier">Font Family Courier New</p>
 99                </section>
100                <header><h4>font-family: Georgia, serif</h4></header>
101                <section class="sample-view">
102                    <p class="font-family-georgia">Font Family Georgia</p>
103                </section>
104            </section>
105            <section>
106                <h4>Generic Font Families</h4>
107                <header><h4>font-family: serif</h4></header>
108                <section class="sample-view">
109                    <p class="font-family-serif">Font Family Serif</p>
110                </section>
111                <header><h4>font-family: sans-serif</h4></header>
112                <section class="sample-view">
113                    <p class="font-family-sans-serif">Font Family Sans-Serif</p>
114                </section>
115                <header><h4>font-family: monospace</h4></header>
116                <section class="sample-view">
117                    <p class="font-family-monospace">Font Family Monospace</p>
118                </section>
119                <header><h4>font-family: cursive</h4></header>
120                <section class="sample-view">
121                    <p class="font-family-cursive">Font Family Cursive</p>
122                </section>
123                <header><h4>font-family: fantasy</h4></header>
124                <section class="sample-view">
125                    <p class="font-family-fantasy">Font Family Fantasy</p>
126                </section>
127            </section>
128        </article>
129        <article>
130            <h3>font-weight</h3>
131            <section>
132                <h4>Keyword Values</h4>
133                <header><h4>font-weight: normal</h4></header>
134                <section class="sample-view">
135                    <p class="font-weight-normal">Font weight: normal</p>
136                </section>
137                <header><h4>font-weight: bold</h4></header>
138                <section class="sample-view">
139                    <p class="font-weight-bold">Font weight: bold</p>
140                </section>
141                <header><h4>font-weight: bolder</h4></header>
142                <section class="sample-view">
143                    <p class="font-weight-bolder">Font weight: bolder</p>
144                </section>
145                <header><h4>font-weight: lighter</h4></header>
146                <section class="sample-view">
147                    <p class="font-weight-lighter">Font weight: lighter</p>
148                </section>
149            </section>
150            <section>
151                <h4>Numeric Values</h4>
152                <header><h4>font-weight: 100</h4></header>
153                <section class="sample-view">
154                    <p class="font-weight-100">Font weight: 100 (Thin)</p>
155                </section>
156                <header><h4>font-weight: 200</h4></header>
157                <section class="sample-view">
158                    <p class="font-weight-200">Font weight: 200 (Extra Light)</p>
159                </section>
160                <header><h4>font-weight: 300</h4></header>
161                <section class="sample-view">
162                    <p class="font-weight-300">Font weight: 300 (Light)</p>
163                </section>
164                <header><h4>font-weight: 400</h4></header>
165                <section class="sample-view">
166                    <p class="font-weight-400">Font weight: 400 (Normal)</p>
167                </section>
168                <header><h4>font-weight: 500</h4></header>
169                <section class="sample-view">
170                    <p class="font-weight-500">Font weight: 500 (Medium)</p>
171                </section>
172                <header><h4>font-weight: 600</h4></header>
173                <section class="sample-view">
174                    <p class="font-weight-600">Font weight: 600 (Semi Bold)</p>
175                </section>
176                <header><h4>font-weight: 700</h4></header>
177                <section class="sample-view">
178                    <p class="font-weight-700">Font weight: 700 (Bold)</p>
179                </section>
180                <header><h4>font-weight: 800</h4></header>
181                <section class="sample-view">
182                    <p class="font-weight-800">Font weight: 800 (Extra Bold)</p>
183                </section>
184                <header><h4>font-weight: 900</h4></header>
185                <section class="sample-view">
186                    <p class="font-weight-900">Font weight: 900 (Black)</p>
187                </section>
188            </section>
189        </article>
190        <article>
191            <h3>font-style</h3>
192            <section>
193                <h4>Keyword Values</h4>
194                <header><h4>font-style: normal</h4></header>
195                <section class="sample-view">
196                    <p class="font-style-normal">This is normal font style.</p>
197                </section>
198                <header><h4>font-style: italic</h4></header>
199                <section class="sample-view">
200                    <p class="font-style-italic">This is italic font style.</p>
201                </section>
202                <header><h4>font-style: oblique</h4></header>
203                <section class="sample-view">
204                    <p class="font-style-oblique">This is oblique font style.</p>
205                </section>
206                <header><h4>font-style: oblique 20deg</h4></header>
207                <section class="sample-view">
208                    <p class="font-style-oblique-20deg">This is an oblique font style with a 20-degree angle.</p>
209                </section>
210            </section>
211        </article>
212        <article>
213            <h3>color</h3>
214            <section>
215                <h4>Color Property Examples</h4>
216                <header><h4>color: red</h4></header>
217                <section class="sample-view">
218                    <p class="color-red">This text is red using a keyword.</p>
219                </section>
220                <header><h4>color: #FF5733</h4></header>
221                <section class="sample-view">
222                    <p class="color-hex">This text is displayed with a hex color code (#FF5733).</p>
223                </section>
224                <header><h4>color: rgb(255, 87, 51)</h4></header>
225                <section class="sample-view">
226                    <p class="color-rgb">This text is displayed using RGB (rgb(255, 87, 51)).</p>
227                </section>
228                <header><h4>color: rgba(255, 87, 51, 0.7)</h4></header>
229                <section class="sample-view">
230                    <p class="color-rgba">This text is displayed using RGBA with transparency (rgba(255, 87, 51, 0.7)).</p>
231                </section>
232                <header><h4>color: hsl(14, 100%, 60%)</h4></header>
233                <section class="sample-view">
234                    <p class="color-hsl">This text is displayed using HSL (hsl(14, 100%, 60%)).</p>
235                </section>
236                <header><h4>color: hsla(14, 100%, 60%, 0.7)</h4></header>
237                <section class="sample-view">
238                    <p class="color-hsla">This text is displayed using HSLA with transparency (hsla(14, 100%, 60%, 0.7)).</p>
239                </section>
240            </section>
241        </article>
242    </main>
243</body>
244</html>

Tipografi (Yazı Tipi ile İlgili)

`font-size` özelliği

 1/* Absolute Values */
 2.font-size-px {
 3    font-size: 16px;
 4}
 5
 6.font-size-pt {
 7    font-size: 12pt;
 8}
 9
10/* Relative Values */
11.font-size-em {
12    font-size: 1.2em; /* 120% of the parent font size */
13}
14
15.font-size-rem {
16    font-size: 1.5rem; /* 150% of the root element's font size */
17}
18
19.font-size-percent {
20    font-size: 150%; /* 150% of the parent font size */
21}
22
23/* Keywords */
24.font-size-medium {
25    font-size: small;
26}
27
28.font-size-medium {
29    font-size: medium;
30}
31
32.font-size-large {
33    font-size: large;
34}
35
36.font-size-x-large {
37    font-size: x-large;
38}
39
40/* Relative Keywords */
41.font-size-larger {
42    font-size: larger;
43}
44
45.font-size-smaller {
46    font-size: smaller;
47}

font-size, bir elemanın içindeki metnin boyutunu belirlemek için kullanılan bir CSS özelliğidir. Metnin görsel önemini ayarlamak ve okunabilirliği artırmak için kullanılır. font-size, çeşitli birimler ve yöntemlerle belirtilebilir.

Değerleri belirtmenin ana yolları

Kesin değerler(px, pt)

Tarayıcıdan veya cihazdan bağımsız sabit bir boyut kullanmak istiyorsanız, yazı tipi boyutlarını piksel veya nokta gibi kesin birimlerle belirtin.

1p {
2    font-size: 16px;
3}

px: Pikseller en yaygın birimdir. Boyutu, 1 piksel artışla belirtin.

1p {
2    font-size: 12pt;
3}

pt: Noktalar, genellikle baskı işlerinde kullanılan birimlerdir. 1 nokta, 1 inçin 1/72'sine eşittir.

Göreceli değerler(em, rem, %)

Ayrıca, bir üst veya kök elemanın yazı tipi boyutuna göre göreceli yazı tipi boyutlarını belirtebilirsiniz. Bu, duyarlı tasarım için uygundur.

1p {
2    font-size: 1.2em; /* 120% of the parent element's font size */
3}

em: em, üst elemanın yazı tipi boyutuna dayanan göreceli bir birimdir. Eğer üst elemanın font-size değeri 16px ise, 1em 16px'e eşittir.

1p {
2    font-size: 1.5rem; /* 150% of the root element's font size */
3}

rem: rem, kök öğenin (genellikle <html> öğesi) yazı tipi boyutuna göre göreceli bir birimdir.

1p {
2    font-size: 150%; /* 150% of the parent element's font size */
3}

%: %, üst öğenin yazı tipi boyutuna göre bir yüzde olarak belirtilir.

Anahtar Kelimeler

Kullanıcı dostu boyutları kolayca belirtmek için anahtar kelimeler de kullanabilirsiniz.

 1p.xx-small {
 2    font-size: xx-small;
 3}
 4p.x-small {
 5    font-size: x-small;
 6}
 7p.small {
 8    font-size: small;
 9}
10p.medium {
11    font-size: medium;
12}
13p.large {
14    font-size: large;
15}
16p.x-large {
17    font-size: x-large;
18}
19p.xx-large {
20    font-size: xx-large;
21}

xx-small, x-small, small, medium, large, x-large, xx-large: Bu anahtar kelimeler, tarayıcıya göre değişen ancak kullanımı kolay temel yazı tipi boyutlarını tanımlar.

Göreceli anahtar kelimeler

Üst öğeye veya çevredeki metin boyutuna göre anahtar kelimeler kullanarak göreceli yazı tipi boyutları belirtebilirsiniz.

1p {
2    font-size: larger;
3}

larger: larger, yazı tipi boyutunu üst öğeden daha büyük yapar.

1p {
2    font-size: smaller;
3}

smaller: smaller, yazı tipi boyutunu üst öğeden daha küçük yapar.

Yaygın kullanım örnekleri

Duyarlı tasarımda, em ve rem sıklıkla üst veya kök öğelerinin boyutuna göre esnek yazı tipi boyutları belirtmek için kullanılır.
Sabit tasarımda veya hassas tasarımda, boyutu sabitlemek için px kullanmak yaygındır.

Yazı tipi boyutu ayarlama örnekleri

 1h1 {
 2    font-size: 2.5rem; /* 2.5 times the size of the root element's font size */
 3}
 4
 5p {
 6    font-size: 16px; /* Fixed size */
 7}
 8
 9.small-text {
10    font-size: smaller; /* Smaller than the parent element's size */
11}

Sonuç

font-size, metnin görsel önemini ve okunabilirliğini ayarlamak için önemli bir özelliktir. Tasarım amacına veya esnek, duyarlı tasarım için birimleri ve anahtar kelimeleri uygun şekilde kullanmak önemlidir.

`font-family` Özelliği

 1/* Specific Font Names */
 2.font-family-arial {
 3    font-family: Arial, sans-serif;
 4}
 5
 6.font-family-verdana {
 7    font-family: Verdana, sans-serif;
 8}
 9
10.font-family-times {
11    font-family: "Times New Roman", serif;
12}
13
14.font-family-courier {
15    font-family: "Courier New", monospace;
16}
17
18.font-family-georgia {
19    font-family: Georgia, serif;
20}
21
22/* Generic Font Families */
23.font-family-serif {
24    font-family: serif;
25}
26
27.font-family-sans-serif {
28    font-family: sans-serif;
29}
30
31.font-family-monospace {
32    font-family: monospace;
33}
34
35.font-family-cursive {
36    font-family: cursive;
37}
38
39.font-family-fantasy {
40    font-family: fantasy;
41}

font-family özelliği öncelikle aşağıdaki iki tür değeri belirtebilir:.

Belirli yazı tipi adları: Belirli bir yazı tipinin adını belirtin. Sisteme yüklü veya web yazı tipleri olarak kullanılabilir yazı tiplerini belirtin.
- Örnek:
  - Arial
  - Verdana
  - Times New Roman
  - Courier New
  - Georgia
Genel yazı tipi ailesi: Belirli bir yazı tipi kullanılamadığında kullanılacak bir yedek yazı tipi grubunu belirtin.
- Örnek:
  - serif: Serif (ör., Times New Roman, Georgia)
  - sans-serif: Sans-serif (ör., Arial, Verdana)
  - monospace: Monospace (ör., Courier New, Lucida Console)
  - cursive: El yazısı (ör., Comic Sans MS)
  - fantasy: Fantezi (ör. Papyrus, Impact)

`font-family` Nasıl Belirtilir

Birden fazla yazı tipi belirtirken, yazı tipi isimlerini virgülle ayırmanız ve yedek olarak sona bir genel yazı tipi eklemeniz önerilir.

1p {
2    font-family: "Times New Roman", Georgia, serif;
3}

Bu durumda, Times New Roman mevcut değilse, Georgia kullanılır ve her ikisi de mevcut değilse bir serif yazı tipi kullanılır.

`font-weight` Özelliği

 1/* Keyword Values */
 2.font-weight-normal {
 3    font-weight: normal; /* Standard thickness (usually 400) */
 4}
 5
 6.font-weight-bold {
 7    font-weight: bold; /* Bold (usually 700) */
 8}
 9
10.font-weight-bolder {
11    font-weight: bolder; /* Bolder than the parent element */
12}
13
14.font-weight-lighter {
15    font-weight: lighter; /* Lighter than the parent element */
16}
17
18/* Numeric Values */
19.font-weight-100 {
20    font-weight: 100; /* Thin (Thin) */
21}
22
23.font-weight-200 {
24    font-weight: 200; /* Extra Light */
25}
26
27.font-weight-300 {
28    font-weight: 300; /* Light */
29}
30
31.font-weight-400 {
32    font-weight: 400; /* Normal */
33}
34
35.font-weight-500 {
36    font-weight: 500; /* Medium */
37}
38
39.font-weight-600 {
40    font-weight: 600; /* Semi Bold */
41}
42
43.font-weight-700 {
44    font-weight: 700; /* Bold */
45}
46
47.font-weight-800 {
48    font-weight: 800; /* Extra Bold */
49}
50
51.font-weight-900 {
52    font-weight: 900; /* Black */
53}

font-weight, metnin kalınlığını belirlemek için kullanılan bir CSS özelliğidir. Metnin görsel vurgusunda ve stilinde önemli bir rol oynar ve yazı tipi stilini değiştirmek için kullanılır. font-weight, ince ile kalın arasında bir kalınlık aralığını belirtmek için sayılar veya anahtar kelimelerle belirtilebilir.

`font-weight` Özelliğinin Ana Değerleri

Anahtar Kelimeler

1p {
2    font-weight: normal; /* Default thickness */
3}

normal standart yazı tipi kalınlığını temsil eder. Genellikle 400'e karşılık gelir.

1p {
2    font-weight: bold; /* Bold */
3}

bold koyu yazı tipini temsil eder. Genellikle 700'e karşılık gelir.

1p {
2    font-weight: bolder; /* Bolder than the parent element's font-weight */
3}

bolder ebeveyn öğesinden daha koyu olan metni temsil eder.

1p {
2    font-weight: lighter; /* Lighter than the parent element's font-weight */
3}

lighter ebeveyn öğesinden daha açık olan metni temsil eder.

Sayısal Değerler

1p {
2    font-weight: 300; /* Light text */
3}
4
5h1 {
6    font-weight: 700; /* Bold text */
7}

font-weight ayrıca 100'den 900'e kadar bir sayı olarak da belirtilebilir. Daha küçük sayılar daha ince metin, daha büyük sayılar daha kalın metin ile sonuçlanır. Genellikle yazı tipi aileleri belirli bir kalınlık aralığını destekler, ancak tüm yazı tipleri için tüm sayılar mevcut değildir.

100: İnce
200: Ekstra İnce
300: Hafif
400: Normal
500: Orta
600: Yarı Kalın
700: Kalın
800: Ekstra Kalın
900: Siyah

`font-weight` Kullanım Örnekleri

 1h1 {
 2    font-weight: 900; /* Black (Extra Bold) */
 3}
 4
 5p.normal {
 6    font-weight: normal; /* Standard thickness */
 7}
 8
 9p.bold {
10    font-weight: bold; /* Bold */
11}
12
13p.lighter {
14    font-weight: lighter; /* Lighter than the parent element */
15}
16
17p.custom-weight {
18    font-weight: 500; /* Medium */
19}

Pratik Kullanım

Standart metinler genellikle 400 (normal) kullanır.
Başlıklar veya vurgulanmış kısımlar için genellikle 700 (bold) kullanılır.
Tasarıma bağlı olarak, aşırı vurgulamayı önlemek için 500 veya 600 gibi ara kalınlıklar da kullanılabilir.

Özet

font-weight, metnin kalınlığını belirleyen bir özelliktir; normal veya bold gibi anahtar kelimeler ya da 100 ile 900 arasında sayılar kullanılır.
lighter ve bolder, ana elemanın kalınlığına göre göreceli ayarlamalar yapar.
Tasarım ve okunabilirlik temelinde uygun bir font-weight seçmek önemlidir.

`font-style` Özelliği

 1/* Font style examples */
 2.font-style-normal {
 3    font-style: normal; /* Normal font style */
 4}
 5
 6.font-style-italic {
 7    font-style: italic; /* Italic */
 8}
 9
10.font-style-oblique {
11    font-style: oblique; /* Slanted text */
12}
13
14.font-style-oblique-20deg {
15    font-style: oblique 20deg; /* Slanted text with a 20-degree angle */
16}

font-style, karakterlerin stilini belirlemek için kullanılan bir CSS özelliğidir; özellikle italik veya normal stiller uygulamak için kullanılır. Bu özellik genellikle metin vurgusu ve tasarımı için kullanılır, özellikle başlıklar ve alıntılar için.

`font-style` Özelliğinin Ana Değerleri

`normal`

1p {
2    font-style: normal;
3}

normal, standart karakter stilidir (genellikle dik karakterlerdir).

`italic`

1p {
2    font-style: italic;
3}

italic, metni italik yapar (eğik). Bu stil, yazı tipi ailesi italik desteği veriyorsa uygulanabilir.

`oblique`

1p {
2    font-style: oblique;
3}

oblique, metni eğik yapar. italicten farklı olarak, yazı tipi italik bir sürüme sahip değilse bu özellik metni yapay olarak eğebilir.

`oblique <angle>`

1p {
2    font-style: oblique 20deg;
3}

oblique ile bir açı belirleyerek metni belirtilen açıyla eğebilirsiniz. Bu özellik, obliquei daha fazla özelleştirmek içindir. Şu anda birçok tarayıcı açı belirtimini desteklemiyor, ancak bazıları destekliyor.

`font-style` Kullanımı

italic, genellikle vurgu, alıntılar ve kitap başlıkları için kullanılır.
oblique, bir yazı tipi italik stil içermediğinde metni yapay olarak eğriltmek için sıklıkla kullanılır.
normal, normal bir metin stiline geri dönüldüğünde kullanılır.

Özet

font-style, metnin eğimini kontrol etmek için kullanılır ve üç temel değeri vardır: normal, italic ve oblique.
Tasarımda italik, metni vurgulamak için sıklıkla kullanılır ve yazı tipi bunu desteklemiyorsa metni eğriltmek için oblique kullanılabilir.

`color` özelliği

 1/* Color examples */
 2.color-red {
 3    color: red;
 4}
 5
 6.color-hex {
 7    color: #FF5733;
 8}
 9
10.color-rgb {
11    color: rgb(255, 87, 51);
12}
13
14.color-rgba {
15    color: rgba(255, 87, 51, 0.7);
16}
17
18.color-hsl {
19    color: hsl(14, 100%, 60%);
20}
21
22.color-hsla {
23    color: hsla(14, 100%, 60%, 0.7);
24}

color özelliği, metnin rengini belirtmek için CSS'deki temel bir özelliktir. HTML öğelerinin metin rengini değiştirmek için kullanılır ve çeşitli formatlarda renkler belirtilebilir.

Açıklama:

color-red sınıfı, metin rengini bir anahtar kelime kullanarak kırmızı olarak belirler.
- red, blue, green gibi CSS'de tanımlanmış renk isimlerini belirtebilirsiniz.
color-hex sınıfı, renkleri onaltılık renk kodlarını kullanarak belirtir.
- #F00 gibi 3 basamakla belirtebilirsiniz. Bu durumda, #F00 rengi #FF0000 ile aynıdır.
color-rgb sınıfı, renkleri RGB formatını kullanarak belirtir.
- RGB: Kırmızı, yeşil ve mavi bileşenlerini 0 ile 255 arasında bir aralıkta belirtir.
color-rgba sınıfı, saydamlık eklemek için RGBA formatını kullanır.
color-hsl sınıfı, renkleri HSL formatını kullanarak belirtir.
- Renkler, ton, doygunluk ve açıklık ile belirtilebilir. Ton, 0 ile 360 derece arasında belirtilir ve doygunluk ile açıklık %0 ile %100 arasında belirtilir.
color-hsla sınıfı, saydamlık eklemek için HSLA formatını kullanır.

Yukarıdaki makaleyi, YouTube kanalımızda Visual Studio Code'u kullanarak takip edebilirsiniz. Lütfen YouTube kanalını da kontrol edin.

YouTube Video

CSS `@` Kuralları Metinle ilgili CSS özellikleri

Yazı tipi ile ilgili CSS Özellikleri

YouTube Video

Önizleme için HTML oluşturma

Tipografi (Yazı Tipi ile İlgili)

font-size özelliği

Değerleri belirtmenin ana yolları

Kesin değerler(px, pt)

Göreceli değerler(em, rem, %)

Anahtar Kelimeler

Göreceli anahtar kelimeler

Yaygın kullanım örnekleri

Yazı tipi boyutu ayarlama örnekleri

Sonuç

font-family Özelliği

font-family Nasıl Belirtilir

font-weight Özelliği

font-weight Özelliğinin Ana Değerleri

Anahtar Kelimeler

Sayısal Değerler

font-weight Kullanım Örnekleri

Pratik Kullanım

Özet

font-style Özelliği

font-style Özelliğinin Ana Değerleri

normal

italic

oblique

oblique <angle>

font-style Kullanımı

Özet

color özelliği

Açıklama:

YouTube Video

`font-size` özelliği

`font-family` Özelliği

`font-family` Nasıl Belirtilir

`font-weight` Özelliği

`font-weight` Özelliğinin Ana Değerleri

`font-weight` Kullanım Örnekleri

`font-style` Özelliği

`font-style` Özelliğinin Ana Değerleri

`normal`

`italic`

`oblique`

`oblique <angle>`

`font-style` Kullanımı

`color` özelliği