CSS Kutu Modeli ile Font Özellikleri, web siteleri için önemlidir ve bu özellikler font boyutu, renk, ağırlık, stil ve font ailesi gibi özelliklerdir Font boyutunu belirlemek için font-size özelliği kullanılır ve px, em gibi birimlerle ayarlanabilir Em birimi, font boyutunu belirleyen diğer ögelerin etkisine bağımlı olarak değişirken, px birimi sabit bir boyut sağlar Font rengini belirlemek için color özelliği kullanılır ve kelime, RGB veya HEX kodları şeklinde ifade edilebilir Em birimi font boyutunun diğer elemanlara bağımlı olarak değişmesine olanak tanımaktadır

CSS kutu modeli, font özelliklerinin boyut, renk, ağırlık, stil ve font türü gibi birçok özelliğini belirlemek için kullanılır. Bu rehber, fontların bu özelliklerinin nasıl belirleneceği ve CSS kutu modeli içinde nasıl kullanılacağına dair bilgi verir. Bu sayede, fontlarınızı görsel olarak daha çekici hale getirmek için kullanabileceğiniz basit bir rehber elde edersiniz.

Özellikle web siteleri için fontların uygun seçilmesi önemlidir. Doğru yazı tipi, sitenizin profesyonel ve etkileyici görünmesini sağlar. Bu rehber, CSS kutu modelini anlamak ve fontları doğru şekilde kullanmak isteyen herkes için idealdir. Aşağıdaki bölümlerde, font boyutu, renk, ağırlık, stil, font ailesi ve belirli bir font için kod örnekleri verilerek, nasıl kullanabileceğiniz açıklanmaktadır.

Font Boyutu ve Rengi

CSS kutu modeli içinde font özellikleri çok önemlidir. Font boyutu ve rengi de bunların en önemlilerinden biridir. CSS kodu aracılığıyla kolayca kontrol edebilirsiniz.

Font boyutunu belirlemek için font-size özelliğini kullanabilirsiniz. Bu özellik, font boyutunu px, em veya diğer ölçü birimleriyle ayarlayabilirsiniz.

• px birimiyle font boyutu:

  p {  font-size: 14px;} 

• em birimiyle font boyutu:

  p {  font-size: 1em;}

em birimi font boyutunu yüzde olarak ayarlar. Örneğin, eğer font'unuz 16px ise 1em, 16px boyutuna eşittir. Eğer font boyutunu 150% arttırmak istiyorsanız, 1.5em yazabilirsiniz.

px birimi, font boyutunun belirli bir genişlikte olmasını sağlar. Bu ölçü birimi genellikle en uygun olanıdır. Örneğin,

p {  font-size: 14px;} 

Font rengini belirlemek için color özelliğini kullanabilirsiniz. Bu özellik, metin rengini herhangi bir CSS renk değerine ayarlar. Örneğin,

p {  color: red;} 

Font özelliklerini doğru bir şekilde kullanmak, web sitenizin görünümünü geliştirir ve okunabilirliğini artırır. Bunun yanı sıra, doğru kullanıldığında, font boyutu ve renkleri, web sitenizin dikkat çekici ve modern görünmesine yardımcı olabilir.

Font Boyutu

Font boyutu, web sayfalarının görünümü ve okunabilirliği için oldukça önemlidir ve CSS kutu modeli içinde belirlenebilir. Font boyutu ayarlamak için kullanabileceğimiz özellik, font-size 'dir. Bu özelliği kullanarak, metnin boyutunu belirleyebiliriz. Bunun için farklı birimler kullanılabilir. Bunlardan biri em birimi olabilir. Bu birim, metnin yazı tipi büyüklüğüne göre ölçülendirilir ve bu nedenle kullanımı daha esnektir. Örneğin, 'font-size: 1.5em;' kodu, yazı tipinin 1,5 katı büyüklüğünde bir metin sağlar. Piksel birimi de kullanılabilir. Bir metnin boyutunu belirlemek için 'font-size: 16px;' gibi bir kod yazabilirsiniz.

Font boyutunu belirlerken dikkat edilmesi gereken bir diğer önemli faktör ise kullanıcının cihazında kullanacağı ekran boyutudur. Responsive tasarımı destekleyen bir web sitesinde, font boyutunu yüzde ile belirleyebiliriz. Örneğin 'font-size: 100%;' kodu, kullanıcının cihazında ayarlanan font boyutunu kullanır.

Font boyutuna ek olarak, font rengi de bir sayfanın tasarımında önemli bir rol oynar. Font rengini değiştirmek için kullanabileceğimiz özellik, color özelliğidir. Bu özellik, farklı renk seçeneklerini içerir ve bunlar 'red', 'blue', 'green', 'black' gibi kelime veya '#F00', '#0000FF', '#008000' gibi RGB veya HEX kodları şeklinde ifade edilebilir.

CSS kutu modelinde font boyutu, en temel unsurlardan biridir. Font boyutunu kontrol etmek için yapılabilecek en kolay şey, "font-size" özelliğini kullanmaktır. Bu özellik, font boyutunu "px", "em" gibi birimlerle belirlemenizi sağlar. Ayrıca, yüzde veya "medium", "small", "large" vb gibi anahtar kelimelerle de belirleyebilirsiniz.

"em" birimi, font boyutunu belirlemek için yaygın olarak kullanılır. Bu birim, font boyutunu belirleyen diğer ögelerin etkisine bağlı olarak değişir. "em" birimi, belirlenen yazı tipinin boyutuna göre genişleyip büzülebilir.

"px" birimi de sıklıkla kullanılan bir birimdir. Bu birim, sabit bir boyutta kalır ve değişmez. Yani, belirlediğiniz boyut herhangi bir etkiye maruz kalmaz. Ancak, farklı cihaz, tarayıcı ve ekran boyutları nedeniyle, piksel bazlı boyutlar kullanmanın dezavantajları da bulunmaktadır.

Özetle, font boyutunu belirlemek için "font-size" özelliğini kullanabilirsiniz. "em" birimi font boyutunun diğer elemanlara bağımlı olarak değişmesine olanak tanırken "px" birimi sabit bir boyut sağlar.

Fontunuzun rengini belirlemek için HTML kodunda kullanılabilecek olan CSS kodu,color özelliğidir. Bu özellik, fontunuzun rengini belirlemenize izin verir ve kullanımı kolaydır.

Yukarıdaki örnekler gibi, CSS kodu kullanarak fontunuzun rengini belirleyebilirsiniz. Tek yapmanız gereken, color özelliğini kullanmak ve bir renk değeri atamaktır.

Em Birimi

Em birimi, font boyutunu ayarlamak için kullanılan bir ölçü birimidir. CSS kodu kullanarak, belirli bir boyutta fontu nasıl göstermek istediğinizi belirleyebilirsiniz. Em birimi, font boyutunu ayarlamak için belirli bir orana sahip olarak kullanılır. Örneğin, eğer font boyutu 16 piksel ve 1 em kullanırsanız, font boyutu 16 piksel büyüklüğünde olacaktır. Ancak, eğer em değeri 2 olarak tanımlanırsa, font boyutu 32 piksel olacaktır.

Em birimi, sayfanızda ölçeklenebilir fontlar kullanmanıza izin verir, bu sayede font boyutunun kullanıcının tercihlerine göre değişebilmesini sağlar. Örneğin, bir kullanıcı göz bozukluğuna sahipse, daha büyük bir font boyutuna ihtiyaç duyabilir. Ayrıca, em birimi, piksel birimi kullanmaktan daha kolaydır, çünkü herhangi bir değişiklik yapmak istediğinizde sadece bir sayıyı değiştirmeniz yeterlidir.

Aşağıdaki örnekte, p etiketi içinde em birimi kullanarak font boyutunu ayarlamak için basit bir kod gösterilmiştir:

Bu yazı 1.5 em büyüklüğünde

Bu kodda, p etiketi içinde style özelliği kullanılarak font boyutu ayarlanıyor. Font boyutu, em birimi kullanılarak belirtiliyor ve 1.5 değeri ile çarpılıyor. Bu, yazı boyutunun standart boyuttan% 150 daha büyük olacağı anlamına gelir. Bu örnekte, font boyutunu arttırmak için sadece 1.5 değerini değiştirmeniz yeterlidir.

Em birimi ayrıca tablolar ve listeler için de kullanılabilir. Örneğin, bir tabloda satırın boyutunu veya bir listenin öğesi boyutunu ayarlamak için em birimini kullanabilirsiniz. Aşağıdaki örnekte, ul etiketi içinde em birimini kullanarak liste öğelerinin boyutunu ayarlayan bir kod gösterilmiştir:

  
Birinci öğe
  
İkinci öğe
  
Üçüncü öğe

Bu kodda, ul etiketi içinde style özelliği kullanılarak font boyutu ayarlanıyor. Em birimi kullanılarak 1.2 değeri ile çarpılıyor ve listenin öğelerinin boyutu arttırılıyor.

Em birimi, ölçeklenebilir fontlar kullanmanıza izin veren güçlü bir araçtır. CSS kodu kullanarak, belirli bir boyutta fontu nasıl göstermek istediğinizi belirleyebilir, bu da kullanıcıların tercihlerine ve cihazlarına uyacak şekilde fontların boyutunu otomatik olarak ayarlamaya olanak tanır.

birimi, font boyutunu ayarlamak için oldukça kullanışlıdır. Em birimi, font boyutunu ataletli bir şekilde ayarlar. Bu, bir üst öğeye göre bağımsızdır ve sayfa ölçülerinde değişiklik olduğunda bile, font boyutu değişmez. Örneğin, bir metin kutusu içinde, font boyutu 1 em ise, kutu boyutu değiştiğinde font boyutu da aynı kalır. Bu özellik, tasarımda tutarlılık sağlamak için faydalıdır. Ayrıca, font boyutunu yüzde ( % ) ile ayarlayarak da yapılabilen benzer bir işlevi de vardır.

• Örnek olarak, eğer h1 etiketinde font boyutu 20 piksel ayarlanmışsa, altında bir p etiketi de olsa, font boyutu 1em olduğunda h1'in font boyutu 20 piksel olarak kalacaktır.
• Sayfanın boyutunu değiştirdiğinizde, font boyutları da değişmeden kalacak.
• Em birimi internet sitenizin mobil uyumlu olmasını sağlar.

Em Birimi ile Font Boyutu Ayarlama

Em birimi, web tasarımında font boyutunu belirlemek için sıklıkla kullanılır, ancak pek çok kişi bu birim hakkında fazla bilgi sahibi değildir. Em birimi, font boyutunu belirlemede kullanılan göreceli bir ölçü birimidir. Bu birim, font boyutunu belirleyen öğenin (genellikle <body> etiketi) yazı tipi boyutuna göre ölçülendirilir. Örneğin, eğer <body> etiketinde font boyutu 14px olarak belirlenmişse, 1em, 14 piksel boyutunda bir fonta eşit olacaktır.

Em birimi font boyutunu dinamik olarak ayarlamak için kullanılır. Bu birim, kullanıcının tercih ettiği yazı tipi boyutuna göre otomatik olarak ayarlanır. Bu nedenle, em birimini kullanarak kendinizden emin olabilir ve web sitenizin tüm ziyaretçilerine rahat bir okuma deneyimi sunabilirsiniz.

Aşağıdaki örnekte, <h2> etiketi 2em olarak ayarlanmıştır:

<h2 style="font-size: 2em;">Başlık</h2>

Burada, h2 etiketi 14 piksel olan <body> etiketindeki yazı tipi boyutuna bağlı olarak 28 piksel boyutunda olacaktır.

Em birimini kullanarak font boyutunu ayarlamak, piksel birimiyle ayarlamanın aksine font boyutunun her zaman uyumlu ve erişilebilir olmasını sağlar.

Piksel Birimi

font-size: 12px;

Px birimi ile Font Boyutu Ayarlama

'Px', piksel birimi anlamına gelir ve font boyutu belirlemek için kullanılır. Özellikle web sayfalarında belirli bir boyutta font kullanmak istiyorsanız, piksel birimi tercih edebilirsiniz. Bu birim genellikle sabit bir değerdir ve her zaman aynı boyutta görüntülenir.

Peki, nasıl kullanılır? Öncelikle, font büyüklüğünü belirleyecek olan font-size özelliğine değer olarak piksel cinsinden bir sayı vermeniz gerekir. Örneğin, font-size: 16px; kodu 16 piksel boyutunda font kullanmanızı sağlar.

Aşağıdaki tablo, px birimi kullanarak farklı boyutlarda font örneklerini göstermektedir:

Yukarıdaki örneklerde görüldüğü gibi, piksel birimi kullanarak font boyutunu istediğiniz gibi belirleyebilirsiniz. Ancak, bu birim sabit bir değer olduğundan, mobil cihazlarda farklı boyutlarda görüntülenebilir. Bu nedenle, font boyutlarını belirlerken dikkatli olmak ve farklı cihazlarda da okunaklı olan boyutları seçmek önemlidir.

Bir fontun büyüklüğü daha önceden belirtilmiş bir ölçü birimi ile ifade edilir. PX (piksel), en yaygın olarak kullanılan ölçü birimidir. Bir PX, bir bilgisayar ekranındaki bir pikseli temsil eder. Aşağıdaki örnekler, farklı boyutlardaki fontların nasıl görüneceğini göstermek için farklı ölçü birimlerini kullanmaktadır.

Bir diğer ölçü birimi ise EM dir. EM, fontun kaç kat daha büyük olacağını belirtir. Örneğin, 1 EM, varsayılan font boyutuna eşittir. Bir fontun büyüklüğünü EM birimiyle belirlemek, dinamik olarak değişen boyutlar için kullanışlıdır. Aşağıdaki örnek, 1 ve 2 EM kullanarak farklı büyüklükteki fontları göstermektedir.

• 1 EM Font Boyutu
• 2 EM Font Boyutu

Font Rengi

Font rengi, yazıların okunabilirliği ve görsel çekiciliği için önemlidir. CSS kutu modeli ile font rengi belirlemek oldukça kolaydır. Bunun içincolor özelliği kullanılır. Bu özellikte hem kelime hem de kod yazımı için önceden tanımlanmış renk değerleri vardır. Örneğin, "color: red;" yazarak fontunuzun rengini kırmızı yapabilirsiniz. Ayrıca "color: #ff0000;" yazarak da aynı sonucu elde edebilirsiniz. Kodlamada hexadecimal renk kullandığınızda "color: #ff0000;" yazmanız yeterlidir. CSS'nin "named color" kelime değeri de birçok renk seçeneği sunar. Örneğin, "color: green;" yazarak yeşil rengi seçebilirsiniz. Bu özellik aynı zamanda farklı HTML elemanlarının farklı font renklerine sahip olmasını sağlamak için de kullanılabilir. Örneğin, "p {"color: blue;"}" yazarak tüm paragrafların rengini mavi yapabilirsiniz.

Ayrıca, bu özellik başka özelliklerle birleştirilebilir. Örneğin, "a:hover {"color: red;"}" yazarak bağlantının üzerine geldiğinde renginin kırmızı olmasını sağlayabilirsiniz. Bu, kullanıcının bağlantıya tıklaması için daha çekici bir görünüm sunar.

Sonuç olarak, CSS kutu modeli içinde font rengi belirlemek oldukça kolaydır. Hem kelime hem de kod yazımı için birçok renk seçeneği mevcuttur. Bu özellikle birleştirildiğinde, web sitenizin görsel çekiciliğini ve kullanılabilirliğini artırabilirsiniz.

div { color: red;}

CSS kutu modelinde font boyutu ve rengi kontrolü sağlamak, web tasarımında önemli bir role sahiptir. Fontlar, oluşturulan web sayfalarında yer alacak metinlerin kalitesini arttırarak daha okunaklı bir hal alacaktır. Bu nedenle, font boyutunu ve rengini nasıl belirleyebileceğinizi öğrenmeniz gerekmektedir.Font boyutunu belirlemek için kullanabileceğiniz basit bir özellik, “font-size” özelliğidir. Bu özelliği kullanarak, metnin yüksekliğini ve genişliğini ayarlayabilirsiniz. Font boyutu belirlerken kullanabileceğiniz iki birim vardır: “em” ve “px.”“em” birimi, font boyutunu tüm sayfa boyutlarına göre orantılı bir şekilde ayarlayacaktır. Örneğin, bir metin kutusunda “font-size: 1em” belirtilmişse, bu orantı başlık ve alt başlık gibi diğer metin kutularında da aynı şekilde uygulanacaktır. Alternatif olarak, “px” birimini kullanarak, belirli bir metin kutusu için font boyutunu belirleyebilirsiniz.Font rengi, “color” özelliğiyle kontrol edilir. Bu özellik, metnin rengini belirlemek için kullanılır. Örneğin, “color: blue” kod satırı, metnin rengini mavi olarak belirleyecektir.

Font Ağırlığı ve Stili

Font ağırlığı ve stili, bir yazının görünümünü değiştirebileceği için font seçiminde oldukça önemlidir. Bu gibi etkileri elde etmek için fontun ağırlık ve stilini değiştirmeniz gerekecektir. CSS kutu modeli içinde font ağırlığını ve stili değiştirmek oldukça kolaydır.

Font ağırlığını değiştirmek için font-weight özelliğini kullanabilirsiniz. Bu özelliği belirleyerek, fontun ağırlığını normalden daha hafif veya daha kalın yapabilirsiniz. Örneğin, aşağıdaki kod satırını kullanarak font ağırlığını bold (kalın) yapabilirsiniz:

Bu yazı kalın font ile yazılmıştır.

Ayrıca, font stilini değiştirmek için font-style özelliğini kullanabilirsiniz. Bu özellik italik veya diğer stilde yazdırmak için kullanılır. Normal font stili yazdırmak için, bu özellik kullanmanıza gerek yoktur. Ancak, özel bir stil kullanmak isterseniz, bu özellik işinize yarayacaktır. Örneğin, aşağıdaki kod satırını kullanarak italik font stilini kullanabilirsiniz:

Bu yazı italik font ile yazılmıştır.

Sonuç olarak, font ağırlığı ve stili gibi özellikleri kullanarak yazıların görünümlerini değiştirebileceğiniz gibi, okuyucuların dikkatini çekerek mesajınızın daha net bir şekilde iletmenize yardımcı olabilirsiniz.

Font Ağırlığı

Font ağırlığı, yazı karakterlerinin görünümünde önemli bir rol oynar. Özellikle belirli bir bölümü vurgulamak için kalın yazı karakterleri tercih edebilirsiniz. CSS ile font ağırlığına kolayca müdahale edebilirsiniz. Öncelikle, font-weight özelliğini kullanarak ağırlığı belirleyebilirsiniz. Bu özellik, birçok farklı değer kabul eder. Örneğin, 100 normal, 400 normal, 700 kalın olarak kabul edilir. Aşağıdaki tabloda, farklı font ağırlığı değerleri ve anlamları hakkında daha fazla bilgi bulabilirsiniz:

Örneğin, bir başlık için ağırlığı 600 olarak ayarlayabilirsiniz:

Bu bir başlıktır

Ayrıca, aynı anda birden fazla font özelliğini de belirtebilirsiniz. Örneğin, font ağırlığına ek olarak font boyutunu da belirlemek için şu kodu kullanabilirsiniz:

Bu bir başlıktır

Font ağırlığı özelliği, web sayfanızın okunabilirliğini ve tasarımını önemli ölçüde etkileyebilir. Doğru kullanıldığında, farklı görsel vurgular sağlayarak sayfanın daha profesyonel görünmesini sağlayabilirsiniz.

Font-Ağırlığı

Font ağırlığı, karakterlerin kalınlık ve inceliği ile ilgilidir. Bu özellik, bir metnin farklı vurgular vererek okunmasını sağlar. CSS'te, font ağırlığını belirlemek için font-weight özelliği kullanılır. Bu özellik 100'den 900'e kadar olan değerler alır. Normal font ağırlığı 400, kalın font ağırlığı 700'dür.

Font-ağırlığı örneği için, aşağıdaki kodu kullanabiliriz:

Bu cümle kalın yazılmıştır.

Bu kod, “Bu cümle kalın yazılmıştır” cümlesinin kalın font ağırlığı ile yazılmasını sağlar.

Font ağırlığını belirlemek için bazı anahtar kelimeler de kullanılabilir. Örneğin, font-weight: bold ifadesi, font-weight: 700 ile aynıdır ve kalın yazı tipi verir. Diğer anahtar kelimeler şunlardır:

• normal
• bold
• bolder
• lighter

Bu anahtar kelimeler, font ağırlığını belirlemek için kullanılabilir ve belirli bir sayı kullanmak yerine daha kolay bir yol sağlar. Örneğin, font-weight: normal ifadesi font ağırlığını 400 olarak ayarlar.

Font ağırlığı, bir metnin dikkat çekmesini veya vurgulanmasını gerektiren bir durumda kullanışlıdır. Örneğin, başlıklarda veya alt başlıklarda kalın font ağırlığı kullanılabilir. Unutmayın, font ağırlığındaki dengeli seçim, okuyucunun metindeki önemli noktalara kolayca odaklanmasına yardımcı olabilir.

CSS kutu modeli ile font boyutu, web sayfalarının estetiği ve okunaklığı açısından oldukça önemlidir. Font boyutunu kontrol etmek içinfont-sizeözelliği kullanılır. Bu özelliğe sayısal bir değer verilerek font boyutu belirlenir.

Font boyutu ayarlama için kullanılan birimlerden biriembirimidir. Bu birim, belirlenen font boyutunun kaç katı olduğunu ifade eder. Örneğin, 1em birimi, font boyutunun normal boyutu olarak kabul edilir. Eğer font boyutunu artırmak istiyorsanız 1em'den daha büyük bir değer vermeyi tercih edebilirsiniz.

Bir diğer birim isepxbirimleridir. Bu birimle belirli bir sayısal değer vererek font boyutunu belirleyebilirsiniz. Örneğin, font-size: 16px; kodu kullanarak font boyutunu 16 piksel olarak ayarlayabilirsiniz. Bu özellik sayesinde, font boyutunu pixel olarak belirlemek istediğiniz durumlarda kullanabilirsiniz.

Font Stili

Font stilini ayarlamak, yazının kalın, italik veya normal görünmesini sağlamak için kullanılır. İki ana font stili, normal ve italic'dir. Bold, iki ana font stilinden herhangi biriyle kullanılabilir. CSS kodu ile font stilini belirlemek için, font-style özelliği kullanılır. İtalik yazı stilini kullanmak için özellik değerine "italic" eklenir. Normal yazı stili için, özellik değeri "normal" olarak belirtilir. Ayrıca, özelliğe "oblique" değeri de atanabilir. Bu özellik, yatay kesiste bir eğri oluşturur ve yazıyı eğimli hale getirir. Örneğin,

Bu yazıyı italik olarak gösterir.

body {  color: white;  background-color: black;}

h1 {  color: red;}

  @font-face {  font-family: myFont;  src: url('myFont.otf');}h1 {  font-family: myFont;}