Web Yazı Tipleri

Ünitenin ilk dersinde, yazı tiplerini ve metni şekillendirmek için kullanılan temel CSS özelliklerini keşfettik. Bu dersimizde daha da ileri gideceğiz, web yazı tiplerini ayrıntılı olarak inceleyceğiz — bunlar, daha çeşitli, özel metin stillerine izin vermek için web sayfanızla birlikte özel yazı tiplerinide kullanmanıza izin verir.

Ön koşullar: Giriş seviyesi bilgisayar kullanma, HTML temelleri(HTML'ye Giriş bölümünü inceleyin), CSS temelleri (CSS'e Giriş), CSS temel metin ve yazı tipi biçimi.
Amaç: Üçüncü taraf bir hizmeti kullanarak veya kendi kodunuzu yazarak bir web sayfasına web yazı tiplerini nasıl uygulayacağınızı öğrenmek

Yazı tipi aileleri özeti

Temel metin ve yazı tipi stilinde incelediğimiz gibi, HTML'nize uygulanan yazı tipleri font-family niteliği ile kontrol edilebilinir. Bu, bir veya daha fazla yazı tipi ailesi adını alır ve tarayıcı, çalıştığı sistemde mevcut olan bir yazı tipini bulana kadar bu listede ileriye doğru hareket eder:

p {
  font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif;
}

Bu sistem iyi çalışıyor, ancak geleneksel olarak web geliştiricilerinin yazı tipi seçenekleri sınırlıdır. Tüm yaygın sistemlerde kullanılabilceğini garanti edebileceğiniz yalnızca bir avuç yazı tipi vardır — Web uyumlu yazı tipleri. Tercih edilen yazı tiplerini belirtmek için yazı tipi yığınını, ardından web için güvenli alternatifleri ve ardından varsayılan sistem yazı tipini belirtebilirsiniz, ancak bu tasarımlarınızın her yazı tipiyle iyi göründüğünden emin olmak için test açısından ek yük getirir.

Web yazı tipleri

IE sürüm 6'ya kadar çok iyi çalışan bir alternatifimiz var. Web yazı tipleri, web siteniz erişilirken indirilecek yazı tipi dosyalarını belirtmenize olanak tanıyan bir CSS özelliğidir, yani web'i destekleyen herhangi bir tarayıcı tam olarak sizin belirlediğiniz fontlara sahip olabilir. Gerekli sözdizimi şuna benzer:

Her şeyden önce CSS'in başlangıcında @font-face ile başlayan indirilecek yazı tipi dosyalarını belirten bir bloğumuz var:

@font-face {
  font-family: "myFont";
  src: url("myFont.woff");
}

Bunun altında, özel yazı tipinizi normal olarak istediğiniz herhangi bir şeye uygulamak için @font-face içinde belirtilen yazı tipi ailesi adını kullanabilirsiniz:

html {
  font-family: "myFont", "Bitstream Vera Serif", serif;
}

Sözdizimi bundan biraz daha karmaşık hale geliyor, aşağıda dahafazla ayrıntıya gireceğiz.

Web yazı tiplerin hakkında akılda tutulması gereken iki önemli nokta vardır:

  1. Tarayıcılar farklı yazı tipi biçimlerini desteklerler, bu nedenle tarayıcılar arasında daha iyi bir destek için birden çok yazı tipi biçimine ihtiyacınız olacaktır. Örneğin, çoğu modern tarayıcı, piyasadaki en verimli biçim olan WOFF/WOFF2'yi (Web Açık Yazı Tipi Biçimi sürüm 1 ve 2) destekler, ancak IE'nin eski sürümleri yalnızca EOT(Gömülü Açık Tip) yazı tiplerini destekler ve iPhone ve Android tarayıcıların eski sürümlerini desteklemek için yazı tipinin bir SVG sürümünü eklemeniz gerekebilir. Gerekli kodu nasıl oluşturacağınızı aşağıda göstereceğiz.
  2. yazı tiplerinin kullanımı genellikle ücretsiz değildir. bunlar için ödeme yapmanız ve/veya yazı tipi oluşturucuyu kodda (veya sitenizde) belirtmek gibi diğer lisa ns koşullarını izlemeniz gerekir. Yazı tiplerini çalmamalı ve uygun şekilde kredi vermeden kullanmamalısınız.

Not: Bir teknoloji olarak Web yazı tipleri, sürüm 4'ten beri Internet Explorer'da desteklenmektedir.

Web yazı tipi olsun yada olmasın, sayfanızda kullanılan yazı tiplerini araştırmak ve değiştirmek için Firefox yazı tipi düzenleyicisini kullanabilirsiniz. Bu video güzel bir yol sunar:

Aktif öğrenme: Bir web yazı tipi örneği

İlk ilkelerden temel bir web yazı tipi örneği oluşturalım. Gömülü bir canlı örnek kullanarak bunu göstermek zordur, bu nedenle, süreç hakkında bir fikir edinmek için aşağıdaki bölümlerde ayrıntılı olarak açıklanan adımları izlemenizi öneririz.

Kullanmanız için size iki örnek dosya; web-font-start.html ve web-font-start.css (canlı örneği görebilirsiniz). Bu dosyaları bilgisayarınızda bir dizine kopyalayın.  web-font-start.css dosya örneğinin içerisinde temel düzen için bazı CSS'ler bulabilirsiniz.

Yazı tipi bulmak

Bu örnek için, biri başlıklar ve diğeri gövde metni için olmak üzere iki web fontu kullanacağız. Başlangıç olarak, yazı tiplerini içeren yazı tipi dosyalarını bulmamız gerekiyor. Yazı tipleri, yazı tipi dökümhaneleri tarafından oluşturulur ve farklı dosya formatlarında saklanır. yazı tiplerini edinebileceğiniz genellikle üç tür site vardır:

  • Ücretsiz bir yazı tipi dağıtıcısı: Bu, ücretsiz yazı tiplerini indirilebilir hale getiren bir sitedir (yazı tipi oluşturucusuna atıfta bulunmak gibi bazı lisans koşulları hala olabilir). Örnek siteler arasında Font Squirrel, dafont, ve Everything Fonts sayılabilir.
  • Ücretli bir yazı tipi dağıtıcısı: Bu, yazı tiplerini fonts.com veya myfonts.com gibi ücret karşılığında kullanıma sunan siteler sayılabilir. Yazı tiplerini, Linotype, Monotype, veya Exljbris gibi doğrudan yazı tipi dökümhanelerinden de satın alabilirsiniz.
  • Çevrim içi yazı tipi hizmeti: Bu, yazı tiplerini sizin için saklayan, sunan ve tüm süreci kolaylaştıran bir sitedir. Daha fazla ayrıntı için Using an online font service bölümüne bakın.

Biraz yazı tipi bulalım! Font Squirrel sitesine gidelim ve iki adet font seçelim — başlıklar için ilginç ve gösterişli bir yazı tipi ve paragraflar içinde daha okunabilir bir yazı tipi. Her bir yazı tipini bulduğunuzda, indirme düşmesine basın ve dosyayı daha önce kaydettiğiniz HTML ve CSS dosyalarının bulunduğu dizine kaydedin. TTF (True Type Fontlar) veya OTF (Open Type Fontlar) olması önemli değil.

Her durumda, yazı tipi paketini açın (Web yazı tipleri genellikle yazı tipi dosyalarını ve lisans bilgilerini içeren ZIP dosyalarında dağıtılır). Pakette birden fazla yazı tipi dosyası bulabilirsiniz — bazı yazı tipleri, örneğin ince, orta, kalın, italik, ince italik vb. gibi farklı şekillere sahip aile olarak dağıtılır. Bu örnek için, yalnızca her seçim için bir yazı tipi dosyası yeterli.

Not: Sağ taraftaki sütunda  "Yazı tiplerini bul" bölümü altında, görüntülenen seçenekleri filtrelemek için farklı etiketlere ve sınıflandırmalara tıklayabilirsiniz.

Gerekli kodun oluşturulması

Şimdi gerekli kodu (ve yazı tipi formatlarını) oluşturmanız gerekecek. Her yazı tipi için şu adımları izleyin:

  1. Bunu ticari bir projede ve/veya Web projesinde kullanacaksanız, herhangi bir lisans gereksinimini karşıladığınızdan emin olun.
  2. Fontsquirrel Web yazı tipi oluşturucuya gidin.
  3. Yazı Tiplerini Yükle düşmesini kullanarak iki yazı tipi dosyanızı web sitesine yükleyin.
  4. "Evet, yüklediğim yazı tipleri yasal olarak web yerleştirmeye uygun" etiketli onay kutusunu işaretleyin.
  5. Kitinizi indirin.

Oluşturucu işlemeyi bitirdikten sonra, indirilecek bir ZIP dosyası almalısınız — HTML ve CSS'nizle aynı dizine kaydedin.

Kodu demonuza uygulamak

Bu noktada, oluşturduğunuz web yazı tipi kitini açın. Sıkıştırılmamış dizinin içinde üç yararlı öğe göreceksiniz.

  • Har yazı tipinin çoklu sürümleri:(örn, .ttf, .woff, .woff2, vb. tarayıcı desteği gereksinimleri değiştikçe yazı tipleri zamanla güncellenecektir) Yukarıda belirtildiği gibi, tarayıcılar arası destek için birden fazla yazı tipi gereklidir — bu, Fontsquirrel'ın ihtiyacınız olan her şeye sahip olduğunudan emin olmanın faydalı bir yoludur.
  • Her yazı tipi için bir demo HTML dosyası — yazı tipinin farklı kullanım bağlamlarında nasıl görüneceğini görmek için bunlar tarayıcınıza yükleyin.
  • stylesheet.css ihtiyaç duyacağınız @font-face kodunu içeren bir dosya.

Bu yazı tiplerini sayfanıza uygulamak için şu adımları izleyin:

  1. Sıkıştırılmış dosyayı klasöre açın, örn fonts.
  2. stylesheet.css dosyasını açın ve her iki @font-face kod bloğunu web-font-start.css dosyanıza kopyalayın. Yazı tiplerinin sitenizde kullanmadan önce içe aktarılması gerektiğinden, bunları CSS'nizden önce en üste koymanız gerekir.
  3. url() işlevlerin her biri, CSS'mize aktarmak istediğimiz bir yazı tipi dosyasına işaret eder. Dosyalara giden yolların doğru olduğundan emin olamanız gerekir. Bizim durumumuzda her yolun başına fonts/ eklmeyi unutmayın.
  4. Artık bu yazı tiplerini, herhangi bir web uyumlu veya varsayılan sistem yazı tipi gibi yazı tipi yığınlarınızda kullanabilirsiniz. Örn:
    font-family: 'zantrokeregular', serif;

Üzerinde bazı güzel yazı tiplerinin uygulandığı bir demo sayfası bulmalısınız. Farklı yazı tipleri farklı boyutlarda oluşturulduğundan, görünümü ve hissi verebilmek için boyutu, aralığı vb. durumları ayarlamanız gerekebilir.

Not: Bunu çalıştırmakta sorun yaşarsanız, sürümünüzü bitmiş dosyalarımızla karşılaştırmaktan çekinmeyin — web-font-finished.html ve web-font-finished.css (bitmiş örneği canlı çalıştırın).

Çevrimiçi bir yazı tipi hizmeti kullanma

Çevrimiçi yazı tipi hizmetleri genellikle yazı tiplerini sizin için depolar ve sunar, bu nedenle @font-face kodu yazma konusunda endişelenmenize gerek kalmaz ve genellikle her şeyin çalışması için sitenize basit bir veya iki satır kod eklemeniz gerekir. Örnekler arasında Adobe Fonts ve Cloud.typography bulunur. Bu hizmetlerin çoğu, test ve demolar için kullanışlı ve ücresiz bir hizmet olan Google Fonts dışında, abonelik tabanlıdır.

Bu hizmetlerin kullanımı kolaydır, bu nedenle onları ayrıntılı olarak ele alacağız. Google yazı tiplerine hızlıca bir göz atalım, böylece fikir edinebilirisiniz. Yine, başlangıç noktanız olarak web-font-start.html ve web-font-start.css dosyalarının birer kopyalarını kullanalım.

  1. Google Fonts'a gidin.
  2. Sevdiğiniz birkaç yazı tipini seçmek için filtreleri kullanın.
  3. Seçmek istediğiniz yazı tipi ailesine tıklayın.
  4. Yazı tipi ailesindeki yazı tiplerinin listelenecek.
  5. Her yazı tipinin sağındaki "+ Select this style" tıkladığınızda sağda açılan "Selected family" ekranında (eğer açılmazsa sayfadaki sağ üsttü bulunan butonuna tıklayın) ilk önce gösterilen HTML kod satırını kopyalayıp HTML dosyanızın başına yapıştırmanız gerekir. CSS'nizde kullanmadan önce HTML sayfanızda CSS'inizden önce tanımlanması gerekir. Daha sonra kendi stil kodunuzu veya dosyanızı eklemelisiniz.
  6. Daha sonra özel yazı tiplerini HTML'nize uygulamak için CSS'nizde listelenen CSS bildirimlerini uygun şekilde kopyalamanız/yazmanız gerekir.

Not:Tamamlanmış bir sürümü google-font.html ve google-font.css adreslerinde bulabilirsiniz, eğer çalışmanızı bizimkilerle karşılaştırmak isterseniz canlı örneğe bir göz atın.

@font-face daha ayrıntılı olarak bakalım

Fontsquirrel tarafından olşturulan @font-face kural bildirimini inceleyelim.

Bloklardan biri şuna benzemektedir:

@font-face {
  font-family: 'ciclefina';
  src: url('fonts/cicle_fina-webfont.eot');
  src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/cicle_fina-webfont.woff2') format('woff2'),
         url('fonts/cicle_fina-webfont.woff') format('woff'),
         url('fonts/cicle_fina-webfont.ttf') format('truetype'),
         url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg');
  font-weight: normal;
  font-style: normal;
}

Bu "bulletproof @font-face sözdizimi", @font-face popüler olmaya başladığında Paul Irish tarafından yapılan bir gönderiden sonra (Bulletproof @font-face Syntax) olarak anılır. Ne yaptığını görmek için üzerinden geçelim:

  • font-family: bu satır, yazı tipine atıfta bulunmak istediğimiz adı belirler. CSS'inizde tutarlı bir şekilde kulllandığınız sürece bunu istediğiniz şekilde belirleyebilirsiniz.
  • src: Bu satırlar, CSS'inize (url bölümü) aktarılacak yazı tipi dosyalarının yollarını ve her bir yazı tipi dosaysının (format bölümü) formatını belirtir. Her durumda ikinci bölüm isteğe bağlıdır, ancak tarayıcıların daha hızlı kullanabilecekleri bir yazı tipi bulmasına izin verdiği için bunu açıklamak yararlıdır. Birden çok bildirim, virgülle ayrılmış olarak listelenebilir — WOFF2 gibi daha yeni daha iyi formatları öne, TTF gibi daha eski ve çok iyi olmayan formatları daha sonra koymak en iyisidir. Bunun tek istisnası, EOT yazı tipleridir — IE'nin eski sürümlerindeki birkaç hatayı düzeltmek için ilk olarak yerleştirilirler ve bu sayede bulduğu ilk yazı tipini kullanmaya çalışır.
  • font-weight/font-style: Bu satırlar, yazı tipinin hangi ağırlığa sahip olduğunu ve italik olup olmadığını belirtir. Aynı yazı tipinin birden çok ağırlığını içe aktarıyorsanız, yazı tipi ailesinin tüm farklı üyelerini farklı adlar olarak adlandırmak yerine, ağırlıklarının/stillerinin ne olduğu belirleyebilir ve sonra aralarında seçim yapmak için farklı font-weight/font-style nitelik değerlerini kullanabilirsiniz. @font-face tip: CSS'nizi basit tutmak için yazı tipi ağırlığını ve yazı tipi stilini tanımlayın ile Roger Johansson ne yapmanız gerektiğini daha ayrıntılı olarak gösteriyor.

Not: Web yazı tipleriniz için belirli font-variant ve font-stretch değerleri de belirtebilirsiniz. Daha yeni tarayıcılarda, unicode-range niteliği ile web yazı tipinde kullanmak istediğiniz belirli bir karakter aralığı olan bir değer de belirteblirsiniz — destekleyen tarayıcılar da, yalnızca belirtilen karakterler indirilecek ve gereksiz indirme yapılmayacaktır. Drew McLellan tarafından yayınlanan Creating Custom Font Stacks with Unicode-Range makalesinde bundan nasıl yararlanılacağına dair yararlı fikirler bulacaksınız.

Değişken yazı tipleri

Tarayıcılarda değişken yazı tipi adı verilen daha yeni bir yazı tipi teknolojisi vardır — bunlar, her genişlik, ağırlık veya stil için ayrı bir yazı tipi dosayasına sahip olmak yerine, bir yazı tipinin birçok farklı varyasyonunun tek bir dosyaya dahil edilmesine izin veren yazı tipleridir. Başlangıç dersimiz için biraz ileri düzeydedirler, ancak kendinizi esnetmek ve geliştirmek istiyorsanız Değişken yazı tipleri klavuzumuzu okuyabilirsiniz.

Becerilerinizi test edin!

Bu dersimizin sonuna geldik ve aktif öğrenme bölümlerimizde zaten bazı beceri tesleri yaptınız, ancak ileriye dönük en önemli bilgileri hatırlıyor musunuz? Modülün sonunda bu bilgileri sakladğınızı doğrulamak için bir değerlendirme bulabilirsiniz - bkz. Bir topluluk okulunun ana sayfasını düzenleme.

Özet

Artık metin biçimlendirme temelleri hakkındaki makalelerimizi incelediğinize göre, topluluk okulu anasayfası olan Dizgi oluşturma modülüne yönelik değerlendirmemizle anlamanızı test etme zamanı.

Bu ünitede