Özel fontlar, tasarımcılar için CSS3'ün en ilgi çekici yönleri arasındadır. Yazı tipi-yüz kuralı ile, kullanıcı tarafından kurulup kurulmadığına bakılmaksızın, çevrimiçi olduğunuz herhangi bir yazı tipini web sayfası metninizde oluşturabilirsiniz.
Çoğu CSS3 tekniğinde olduğu gibi, temel kod oldukça basittir, ancak pratik gerçeklik biraz daha karmaşıktır.
Bu kısa derste, sayfalarınıza özel yazı tiplerini dahil etmenin temellerini inceleyeceğiz.
Öncelikle kullanmak istediğiniz yazı tipinin web kullanımı için lisanslandığından emin olun. Hemen hemen tüm ücretsiz fontlar bir web sitesinde kullanılabilir ve birçok premium font, web kullanımını kapsayan bir lisansla kullanılabilir.
Sonra seçtiğiniz yazı tipini sunucunuza yükleyin. Bunu özel bir "font" dizininde saklamak isteyebilirsiniz, ancak bu isteğe bağlıdır.
Dosyaları, kullanmayı planladığınız yazı tipinin kalın veya italik gibi herhangi bir varyantına dahil etmeyi unutmayın. Internet Explorer için EOT (Embedded OpenType) dosyalarını ve diğerlerini de OTF (OpenType) veya TTF (TrueType) için kullanabilirsiniz. (Ek seçenekler WOFF (Web Açık Yazı Biçimi) ve SVG (Ölçeklenebilir Vektör Grafikleri) içerir, ancak burada daha yaygın olan türlere bağlı kalacağız.)
Yazı tipi dosyalarının sunucunuzda nerede saklandığını not edin.
Çalıştığınız sayfa için HTML veya CSS dosyasını açın. Stil koduna bir yazı tipi yüz beyanı ekleyin:
@font-face {}Font-yüz bölümü içinde ilk önce, yazı tipine daha sonra kullanmak için kullanabileceğiniz bir ad verin:
font-family: 'lovelyFont';Ardından, hala yazı tipi yüz bölümü içinde, EOT dosyasının yerini belirtin:
src: url('fonts/lovely_font.eot');Yazı tipinin yerini ve adını gerektiği gibi değiştirin. Ardından bir OTF ve / veya TTF yazı tipi ekleyin:
src:url('fonts/lovely_font.otf')src:url('fonts/lovely_font.ttf') Bu, çoğu durumda yeterli olacak olan, gerekli kodun çıplak kemikleridir. Ancak, kodu daha güvenilir hale getirmek için atabileceğiniz ek adımlar vardır. İlk olarak, yazı tipi dosya türünün bir göstergesini içermek için bu bölümü genişletin:
src:url('fonts/lovely_font.otf')format('opentype');src:url('fonts/lovely_font.ttf')format('truetype');Başka bir isteğe bağlı verimlilik ölçüsü olarak, kullanıcının zaten sahip olması durumunda, yazı tipinin yerel bir kopyasını kontrol etmek için tarayıcıyı alabiliriz. Kodunuzu, URL'yi belirtmeden önce yerel bölümü ekleyerek aşağıdaki gibi tekrar genişletin, böylece yazı tipi yalnızca gerektiğinde indirilir:
src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.otf')format('opentype');src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.ttf')format('truetype');Ekleme hem OTF hem de TTF için aynıdır. Yerel anahtar kelimenin ardından yazı tipi adını belirtiriz.
Bu durumda yerel yazı tipini belirten iki satır vardır, çünkü fontun adı birden fazla kelimeye sahiptir. Heceleme sürümü, font isimlerinin belirli işletim sistemlerinde depolanma biçimine hitap eder - fontun isminde yalnızca tek bir kelime varsa bu ek satır gerekli değildir. Bir yazı tipinin farklı sistemlerde farklı adlara sahip olabileceğini biliyorsanız, yerel bölümünüzdeki olasılıkların her birini ekleyin.
Sonunda yazı tipini sayfa öğelerine uygulayabiliriz. Belirli bir öğe veya öğe grubu için CSS kodunda, seçtiğiniz tüm yedeklemeler dahil olmak üzere, kullandığınız yazı tipi adını belirtmeniz yeterlidir:
div { font-family: 'lovelyFont', sans-serif; }Örneğin, yazı tipinizin kalın bir sürümünü kullanmak isterseniz, kalın yazı tipi dosya URL'sini ve “font-weight: bold;” ifadesini içeren başka bir font-yüz bölümü ekleyin. Uygulanan özel yazı tipine sahip herhangi bir öğe için kalın yazı tipi ağırlığını belirtin ve tarayıcı otomatik olarak kalın sürümü oluşturur:
/*default version*/@font-face {font-family: 'lovelyFont';src: url('fonts/lovely_font.eot');src:local('Lovely Font'),local('Lovely-Font'),url('fonts/lovely_font.otf')format('opentype');}/*bold version*/@font-face {font-family: 'lovelyFont';src: url('fonts/lovely_font_bold.eot');src:local('Lovely Font Bold'),local('Lovely-Font-Bold'),url('fonts/lovely_font_bold.otf')format('opentype');font-weight: bold;}/*container element*/div { font-family: 'lovelyFont', sans-serif; }/*span elements inside the container div*/span { font-weight: bold; }Bu kadar!
Kullanabileceğiniz tür yüzlerini genişletmek için CSS3 kullanıyor musunuz? Adobe'nin Typekit veya Google'ın Webfonts gibi bir hizmet kullanıyor musunuz? Yorumlarda bize bildirin.
Öne çıkan görsel / küçük resim, yazı tipi resmi Shutterstock üzerinden.