2010-11-07 41 views
7

Sitede bir başlık için yeni google API fontlarından birini kullanıyorum. Yannone Kaffeesatz ve oldukça yoğun bir yazı. aşağıdaki gibiYazı tipi yığınının hangi fontta kullanıldığına bağlı olarak yazı tipi boyutunu ayarlama

Benim yazı yığını:

font-family: 'Yanone Kaffeesatz', arial, serif; 

Yannone Kaffeesatz yazı kılan bu iyi, ama eğer bu olmuyorsa, Arial çok daha açıktır ve başlık iki hat üzerinde yayılmıştır.

Sorum şu:

, sayfada varılan, yazı bağlı olarak farklı bir font-size kullanmak mümkün mü?

Çok sayıda tarayıcıda ideal olarak desteklenir.

Teşekkür

Tom

+0

Bu bir dupe'dir, ancak orijinali bulamıyorum –

+1

Sunucu tabanlı kullanıcı aracısı algılamayı ekleyebilirsiniz ve ardından farklı bir sayfaya (veya yalnızca css'ye) hizmet verebilirsiniz. IMO bu sadece biraz zarif bir çözümdür. Google, çalışması garanti edilen tarayıcıların ve sürümlerin bir listesine sahiptir. Çoğunlukla statik metinse, sadece bir PNG kullanabilirsiniz. –

+0

Orijinal kopyası muhtemelen budur: [JQuery ile Font-Aileye göre değişen Gövde Yazı Tipi] (http://stackoverflow.com/questions/1271477/changing-body-font-size-based-on-font- family-with-jquery) – Lode

cevap

4

Hayır, bu mümkün değildir. JavaScript'te bile bir font-family listesinden gerçek kullanılan yazı tipini bulmak karmaşık ve zordur - saf CSS'de imkansızdır.

JavaScript yoluna gitmek istiyorsanız, here, JavaScript'teki gerçek yazı tipi ailesini algılamak için akıllı bir yöntemin bağlantısıdır.

Kullanılan yazı tipini öğrendikten sonra, element.style.letterSpacing'u gereken miktarda ayarlamak kolaydır.

+0

Yanıtınız için teşekkür ederiz. Durumun böyle olduğunu hissettim. Yığımı tekrar düşünmek zorunda kalabilirim. Bir taşma ile bir şeyler yapabilirim veya belki de birden fazla çizgiyi incelemek için kullanabilirim. –

0

Yazı tipine bağlı olarak yazı tipi boyutunu biraz değiştiren bir özellik . Sadece Firefox tarafından desteklenen CSS3.

Ama Arial'i küçülterek en boy oranına kadar boyutunu değiştirmek istediğinizi sanmıyorum. Bir yazı tipini sıkmak (örneğin harf boşluğu) çirkinleşir. Bunun yerine yığında daha yoğun yazı tipleriyle başlamalısınız. Yoğunlaştırılmış yazı tipi seçeneklerini ayrıntılı olarak inceleyen

http://pieroxy.net/blog/2014/10/11/the_quest_for_a_condensed_web_font.html. Daha zor bulgulardan biri olan font-stretch: condensed, örn. erişim, örn. Pencerelerde Arial Dar (Office ile).

İlgili konular