Yazı tiplerinin farklı web tarayıcılarında aynı şekilde görüntülenmesini nasıl sağlayabilirim?


11

Bir müşteri için bir web sitesi oluşturuyorum ve gezinme çubuğunda resimler değil, düz metin kullanmayı umuyorduk. Kullandığımız yazı tipi Century Gothic (Bu yazı tipinin PC ve Mac'lerin çoğunda mevcut olduğuna inanıyorum) Sorun, farklı tarayıcılarda yazı tipinin önemli ölçüde farklılık göstermesidir. Chrome'da bunu istediğimiz gibi bulduk, ancak firefox'ta metin daha küçük ve daha cesur.

Yazı tipi özelliklerini değiştirmek için tarayıcıya özgü javascript yazmanın yanı sıra, yazı tiplerinin çapraz tarayıcı oluşturma biçimini standartlaştırmak için başka seçenekler var mı? Belki bir kütüphane veya API? Belki de yazı tipi özelliklerini bildirmede daha belirgin olma meselesi? Dürüst olmak gerekirse sıkışmış ve yardıma ihtiyacım var.

Yanıtlar:


13

Tarayıcılarda aynı şekilde görüntülenmesi için yazı tipleri ve başka şeyler almayacaksınız. Yazı tiplerinin kullanımı mükemmel bir örnektir. Windows'ta Safari'nin bir sebepten dolayı metni kalınlaştırmayı sevdiğini biliyorum. Ne yazık ki web böyle çalışır. Tarayıcıların, işletim sistemlerinin, monitörlerin, grafik işlemcilerin vb. Çeşitliliği, bir kişinin bir web sayfasını görüntüleyebileceği binlerce veya on binlerce farklı yol olduğu anlamına gelir. Yani wbe için inşa ederken bunu bilmek ve sitenizin herkes için mükemmel piksel olmayacağını bekleyerek yapmak zorunda. Bu basılı değil. Vahşi vahşi ağ.


Evet, sanki bu talihsiz bir gerçekmiş gibi görünüyor. Bununla birlikte, birisinin işleri normalleşmeye biraz daha yakınlaştıracak bir javaScript parçası yazması mümkün görünmektedir.
Zach Lysobey

Ne yazık ki bu bir kod sorunu değil, bir yazılım ve donanım sorunu. Tarayıcılar bu şekilde geliştirilir ve donanım hızlandırma yaklaştıkça daha da kötüleşir (yazı tipleriniz etkinleştirmiş olanlar için daha pürüzsüz görünmesine rağmen).
John Conde

1
Bu makale (ve aynı dizideki diğerleri) merak ediyorsanız sorunları ayrıntılı olarak açıklamaktadır. blog.typekit.com/2010/12/17/…
paulmorriss

En iyi cevabınızı seçtiniz. Kod sorunu olmadığını söylüyorsunuz, ancak kesinlikle birisi kod yazabilir, böylece tek bir metin satırı piksel cinsinden minimum genişliğe uzatılır. Kendisi bu durumu büyük ölçüde iyileştirecektir. Oluşturulan <p> genişliğini test edebilir ve buna göre harf aralığını artırabilir. Olabilir?
Zach Lysobey

@Zach - Bazı planlama ve akıllı kodlama ile birçok engelin üstesinden gelebilirsiniz. Ama sonunda sadece çok fazla kontrole sahip olabiliriz. Temel olarak Windows'ta Safari ve geri kalanı çevreleyen kod gibi sorunları kabul edebiliyorsanız, iyi olmalısınız.
John Conde

1

Aslında yazı tiplerini CSS'nize gömmek için bir yöntem vardır. Bu son derece kolay. Bunun nasıl yapılacağı hakkında daha fazla bilgi için http://randsco.com/index.php/2009/07/04/p680 adresine bakın . Bunun dezavantajı, eski tarayıcıların (pre ei 7 ve ff 3 sanırım ...) bunu desteklememesidir. Ancak bu eski tarayıcıları kullanan insanların sayısı hızlı bir şekilde azalıyor ve hala işe yarayacak ve genellikle çoğu bilgisayardaki alternatif yazı tiplerini belirtmek hala mümkün.

Kullanmadığım bir başka yaklaşım da flaş kullanmaktır. Bu konuda bildiğimden çok fazla bilgim yok.


Css notunda, bu yazı tipi başka bir kişi tarafından css yöntemini kullandığınızda, web sitenize erişebilen herkesin kullanabileceği gibi, telif haklarını ihlal etmeyeceğiniz yazı tiplerini kullandığınızdan emin olun.
Kenneth

Bu Flash yöntemine sIFR denir . Artıları ve eksileri de var.
John Conde

Bu yaklaşımı kullanarak bile diğer cevapta belirtildiği gibi, tarayıcılar ve sistemler arasında küçük farklılıklar olacaktır, ancak site tasarımınızın geri kalanıyla yapabileceğiniz ve siteyi tüm farklı yapılandırmalarda iyi hale getirebilecek şeyler vardır. Önemli bir şey, sitelerinizi test etmek için birden fazla tarayıcıya ve tercihen işletim sistemlerine sahip olmaktır.
Kenneth

1

Diğerlerinin de belirttiği gibi, tam kontrole sahip değiliz. Ancak, tarayıcıları benzer şekilde genel olarak işlemek için yararlı bulduğum birkaç şeyden bahsetmeye değer olduğunu düşünüyorum. Her ikisi de birçoğunuzun zaten yaptığı "temellere geri dön" türünde şeylerdir, ancak üzerine kurduğunuz temelin sizi başarı veya başarısızlık için ayarladığından bahsetmeye değer olduğunu düşündüm ...

CSS Sıfırlama. Kavram basittir, HTML oluşturma için ortak bir başlangıç ​​noktası ayarlamak için stil sayfasındaki HTML etiketi varsayılanlarını ayarlarsınız. İşte bir makale ve örnek: http://meyerweb.com/eric/tools/css/reset/

Doküman Bildirimi. http://htmlhelp.com/tools/validator/doctype.html

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.