Web Sayfalarında Özel Yazı Tiplerini Kullanma
Metin içeriği her zaman web sitelerinin önemli bir parçasıydı, ancak Web'in ilk günlerinde, tasarımcıları ve geliştiricileri web sayfalarının üzerinde yaptıkları tipografik kontrolde ciddi şekilde sınırlıydı. Bu, sitelerinde güvenilir bir şekilde kullanabilecekleri fontlarda bir sınırlama içeriyordu. Geçmişte bahsedilen "web güvenli fontlar" terimini muhtemelen duymuşsunuzdur. Bu, bir kişinin bilgisayarında bulunması muhtemel olan küçük yazı tipi setine atıfta bulundu, yani eğer site bu yazı tiplerinden birini kullanırsa, bir kullanıcının tarayıcısında doğru bir şekilde yapılacağının güvenli bir bahistir.
Bugün, web profesyonelleri, birçoğu WOFF formatı olan, çalışmak üzere bir dizi yeni yazı tipine ve tip seçeneğine sahiptir.
WOFF Nedir?
WOFF, “Web Açık Yazı Biçimi” anlamına gelen bir kısaltmadır. CSS @ font-yüz özelliği ile kullanılacak yazı tiplerini sıkıştırmak için kullanılır. Bu tür web güvenli yazı tiplerinden bazıları olan tipik "Arial, Times New Roman, Georgia" nın ötesinde özel yazı tiplerini kullanabilmeniz için yazı tiplerini web sayfalarına yerleştirmenin bir yoludur.
WOFF, web sayfaları için yazı tipi için standart olarak W3C'ye gönderilmiştir. 16 Kasım 2010 tarihinde bir çalışma taslağı haline geldi. Bugün aslında formatın ilk versiyonundan yaklaşık% 30 oranında sıkıştırma sağlayan WOFF 2.0'ımız var. Bazı durumlarda, bu tasarruf daha da fazla olabilir!
Neden WOFF Kullanmalı?
WOFF formatı ile verilenler de dahil olmak üzere, web fontları diğer yazı tipi seçeneklerine göre birçok avantaj sağlar. Bu web güvenli fontlar kadar kullanışlıdır ve işimizdeki yazı tipleri için hala bir yer var, seçimlerimizi genişletmek ve tipografik seçeneklerimizi açmak da güzel.
WOFF yazı tipleri aşağıdaki avantajlara sahiptir:
- Resimler olarak yazı tiplerinden daha erişilebilirler. WOFF stilleri CSS'ye sahip düz HTML metni, size görüntülerin izin vermeyeceği kolaylık ve tasarım kontrolü sağlar.
- WOFF dosyaları bağlamsal formlar ve eski stil rakamları gibi yazım bilgilerini içerir. Bu, web sayfalarınıza daha iyi tipografi sağlar, çünkü sadece doğruları değil, doğru karakterleri kullanırsınız.
- WOFF yazı tipleri uluslararasılaştırmaya yardımcı olabilir, çünkü yazı tiplerini diğer dillerden karakterlerle gömebilirsiniz.
- Tüm CSS tarzı metinlerde olduğu gibi, WOFF ile biçimlendirilmiş yazı tipleri daha fazla arama motoru dostu. Arama motorları, bir görüntüye gömülmüş metni "görmez", ALT metni yardımcı olabilirken, metnin kendisinin yerini tutamaz.
- WOFF yazı tipleri sıkıştırılmıştır, bu nedenle diğer yazı tipi dosyalarından daha küçüktürler. Bu site indirme hızı ve genel performans ile yardımcı olacaktır.
- Şirket yazılarınızı WOFF dosyaları olarak yerleştirerek marka kimliğinizi korumak için WOFF dosyalarını kullanabilirsiniz.
WOFF Tarayıcı Desteği
WOFF, aşağıdakiler dahil olmak üzere modern tarayıcılarda mükemmel bir tarayıcı desteğine sahiptir:
- Chrome 6+
- Firefox 3.6+
- Internet Explorer 9+
- Opera 11.1+
- Safari 5.1+
Bu günlerde, aslında tek başına Opera Mini'nin tüm versiyonları olmak üzere kurulda destekleniyor.
WOFF Fontları Nasıl Kullanılır
WOFF dosyasını kullanabilmek için web sunucunuza bir WOFF dosyası yüklemeniz, @ font-face özelliği ile bir isim vermeniz ve ardından CSS'nizdeki yazı tipini çağırmanız gerekmektedir. Örneğin:
- Web sunucusunun / font dizinine myWoffFont.woff adındaki yazı tipini yükleyin.
- CSS dosyanızda @ font-yüz bölümü ekleyin:
@ yazı tipi yüz {
yazı tipi ailesi: myWoffFont;
src: url ('/ yazı tipleri / myWoffFont.woff') biçimi ('woff');
}
- Yeni yazı tipi adını (myWoffFont) CSS yazı tipi yığınınıza ekleyin, diğer herhangi bir yazı tipi adı gibi:
p {
yazı tipi ailesi: myWoffFont , Geneva, Arial, Helvetica, sans-serif;
}
WOFF Fontları Nereden Alınır
Ticari ve ticari olmayan kullanım için ücretsiz olan çok sayıda WOFF yazı tipi bulabileceğiniz iki harika yer vardır:
- Font Kitaplığı'nı aç
- Yazı tipi sincap
WOFF biçiminde olmayan bir yazı tipini kullanma lisansınız varsa, yazı tipi dosyalarınızı WOFF dosyalarına dönüştürmek için Font Squirrel'de benzeri bir WOFF yaratıcısı kullanabilirsiniz. Ayrıca, TrueType / OpenType yazı tiplerini WOFF'e dönüştürmek için Macintosh ve Windows üzerinde kullanabileceğiniz sfnt2woff adında bir komut satırı aracı da vardır.
Sisteminize uygun ikili dosyayı indirin ve komut satırında (veya Terminal) çalıştırın ve talimatları izleyin.
WOFF Örneği
İşte WOFF dosyalarının birkaç örneği: 24 Saatte HTML5'teki WOFF Sayfası.
Jennifer Krynin tarafından yazılmış orijinal makale. 7/11/17 tarihinde Jeremy Girard tarafından düzenlenmiştir