webtasarim-dersleri-yazi-bicimlendirme

Web Tasarım Dersleri Yazı Biçimlendirme

Web Tasarım Dersleri Yazı Biçimlendirme

Web Tasarım Dersleri Yazı Biçimlendirme, Yazı tipi Font Biçimlendirme, Web Tasarım dersleri yazı fontu biçimlendirme, Web tasarım dersleri yazı tipi biçimlendirme, Web tasarım dersleri yazı stilleri, Web Tasarım dersleri ücretsiz yazı tipleri, Web tasarım dersleri google yazı fontları, web tasarım dersleri seo uyumlu yazı fontları, web tasarım dersleri yazı fontları, web tasarım dersleri font family, yazı fontlarının seo çalışmasına etkisi var mı ? web sitesi yazı tiplerinin seoya etkisi var mı ? seo uyumlu yazı tipleri hangileri ? google arama motoru için yazı tiplerinin önemi var mı ? Web tasarımı yaparken yazı tipini nasıl kodlayacağız gibi soruların cevabını vereceğiz.

Yazı tipleri web sitelerimizin kodlarının en önemli parçalarından biridir. Seo konusunda kesinlikle etkisi vardır. Seo ile ilgili uyum yada uyumsuzluk sorunlarına yol açmaları mümkündür, web tasarım yaparken kullandığımız yazı fontları önemlidir. Bulunduğumuz ülkenin yazı tipini destekleyen yazı tipleri, tasarımını yaptığımız web sitemizin yayınlanacağı ülkenin yazı tipleri ve fontlarını kullanmak web sitemizin kullanışlılığı ve arama motorlarında sitemizin yükselmesi açısından oldukça önemlidir.

web-tasarim-dersleri-yazi-bicimlendirme

Web Tasarım Dersleri Yazı Biçimlendirme

Yazı tipi font biçimlendirme,

bu konunun kapsamına metinlerimizde kullanacağımız yazı tiplerinin (font) büyüklük, kalınlık, biçem… vb temel font işlemleri girmektedir.

Yazı Tipi Ailesi (Font-Family)

Oluşturacağımız metinde kullanacağımız yazı tipi grubunu belirlemek için kullanılır birden fazla yazı tipi atanacaksa aralarında virgül konulur bu kullanım tarzı yaygındır çünkü sizin belirleyeceğiniz yazı tipi kullanıcının bilgisayarında olmayabilir. Dolayısıla mantıklı olan da birkaç tane font tanımlamak olacaktır ilk sıradaki ilk tercihimizdir. Bilgisayar ilk önce bu fontu dener. Eğer onu çalıştıramazsa sırayla diğerlerini dener istemcinin bilgisayarında hiçbirini bulamazasa sırayla diğerlerini dener. İstemcinin bilgisayarında hiçibirini bulamazsa kullanılan tarayıcının varsayılan fontunu kullanır. Bu noktada tarayıcılarda tanımlı olan yazı fontlarını tasarımımızda kullanmak çok mantıklıdır, özellikle Google arama motorunun özellikle tavsiye ettiği yazı tipleri vardır,

Örneğin;

Roboto, Open Sans, Lato, Oswald, Slabo gibi ( daha fazla yazı tipi için linki ziyaret edebilirsiniz. https://fonts.google.com/)

Uyarı: Kullanacağımız yazı tipinin adı birden çok kelimeden oluşuyorsa (örn: Times New Roman) atama yaparken “”(çift tırnak) kullanılır.

 

<html>

<head>

<style type=”text/css”>

p.serif{font-family:”Times New Roman”, Georgia, Serif} ;

</style>

</head>

<body>

<h1> CSS font-family kullanımı. </h1>

<p class=”serif”> Bu paragraf Times New Roman fontu ile yazılmıştır. </p>

<p class=”sansserif”> Bu paragraf Arial fontu ile yazılmıştır. </p>

</body>

</html>

Yazı Tipi Boyutu (Font-Sıze)

Yazı-tipini boyutunu belirlemek için kullanılır.

<html>

<head>

<style type=”text/css”>

p {font-size:30px};

</style>

</head>

<body>

<p> Bu paragrafın font değerini 30px olarak ayarladık. </p>

</body>

</html>

Yukarıdaki kullanım (px kullanımı) Firefox, Chrome ve Safari tarayıcılarında metni yeniden boyutlandırmanıza izin verse de (sitenize koyacağınız yazı boyutunu değiştirmeye yarayan butonlarla) Internet Explorer tarayıcısında bu mümkün olmayacaktır. Bu sakıncalı durumlardan kurtulmak için W3C tarafından px yerine em kullanmanız önerilmektedir.

1 em tarayıcıların varsayılan ölçüsüne eşittir. Tarayıcılar genellikle varsayılan olarak 16px kullandıklarından 1em=16px olmaktadır.

<html>

<head>

<style>

p {font-size:2.5em} ; /* 40px/16=2.5em */

</style>

</head>

<body>

<p> Bu paragrafın font değerini 2.5em olarak ayarladık </p>

</body>

</html>

Yazı Tipi Kalınlığı (Font-Weight)

Yazı-tipi kalınlığını belirlemek için kullanılır. Değer olarak, normal, bold ve bolder kullanılır. Ayrıca inceden kalıa doğru 100 ile 900 arasında bir değer de alabilir

<style type=”text/class”>

p{font-weight: bold;}

</style>

<body>

<p> bu paragrafa bold değeri atanmıştır. </p>

Yazı Tipi Stili (Font-Style)

Fontun yatık (italik) olup olmayacağını belirlemek için kullanılır değer olarak normal, italic ve oblique kullanılır.

<html>

<head>

<style type=”text/css”>

p {font-size:2em};

p.normal {font-style:normal};

p.italic {font-style:italic};

p.oblique {font-style:oblique};

</style>

</head>

<body>

<p class=”normal”> Bu, normal bir paragraf. </p>

<p class”italic”> Bu, italic bir paragraf. </p>

<p class”oblique”> Bu, oblique bir paragraf. </p>

</body>

</html>

Yazı Tipi (FONT)

Tüm yazı-tipi özelliklerini bir arada tanımlamak için kullanılır.

<head>

<style type=”text/class”>

p {font:bold italic 1.5em Verdana, Helvetica, Arial, Sansserif;}

</style>

</head>

<body>

<p> Paragrafı, 1.5em ölçüsünde, bold, italik ve font grubu olarak da Verdana, Helvetica, Arial, Sansserif yaptık. </p>

</body>

Facebook Sayfamız

İnstagram Sayfamız

Web Tasarım Sayfamız

İletişim Sayfamız

 

 

 

 

Web Tasarım Dersleri Yazı Biçimlendirme
Bu yazıya oy ver

By | 2017-07-20T22:41:52+00:00 Aralık 2nd, 2016|Categories: BLOG, Kategoriler, Web Tasarım Dersleri|0 Comments

About the Author:

 
%d blogcu bunu beğendi:
EV SSL