Web sayfalarına yazı tipi gömmek için iyi bir çözüm (özellikle SEO tarafında) anlamaya çalışıyorum. Şimdiye kadar, Firefox ve this pretty cool solution üzerinde bile çalışmayan the W3C solution'u gördüm. İkinci çözüm sadece başlıklar içindir. Tam metin için bir çözüm var mı? Web sayfaları için standart yazılardan bıktım.Yazı tipleri HTML'ye nasıl gömülür?
Teşekkürler!
Bu soru orijinal olarak sorulmuş ve yanıtlanmıştır çünkü işler değiştirilmiştir. Gölgeli yazı tipi yazı tipinin gömülmesi @ font-face embedded kullanarak çalışmak için büyük miktarda iş yapıldı.
Paul Irish, diğer birçok kişiden gelen girişimleri birleştirerek Bulletproof @font-face syntax araya getirdi. Aslında tüm makaleyi (yalnızca en üstte değil) izlerseniz, IE, Firefox, Safari, Opera, Chrome ve muhtemelen başkalarını kapsayacak tek bir @ font-face ifadesine izin verir. Temel olarak bu, OTF, EOT, SVG ve WOFF ürünlerini herhangi bir şeyi kırmayan yollarla besleyebilir.
@font-face {
font-family: 'Graublau Web';
src: url('GraublauWeb.eot');
src: local('Graublau Web Regular'), local('Graublau Web'),
url("GraublauWeb.woff") format("woff"),
url("GraublauWeb.otf") format("opentype"),
url("GraublauWeb.svg#grablau") format("svg");
}
Bir TTF veya OTF dosyayı yükleyip için otomatik olarak dönüştürülür yazı dosyaları ulaşmasını sağlar @font-face Generator dahil kullanışlı çeşitli araçlar araya koymak baz, Font Squirrel gelen Çalışma:
onun makalesinden snipped Önceden oluşturulmuş CSS ve bir demo HTML sayfası ile birlikte diğer türleri. Yazı tipi Sincap ayrıca Hundreds of @font-face kits vardır.Soma Tasarım da bir şeyler deneyebilirsiniz böylece anında bir sayfada fontları yeniden tanımlamakta birlikte FontFriend Bookmarklet koydu. FireFox 3.6+ sürümünde sürükle ve bırak @ font-yüz desteği içerir. Daha yakın zamanlarda, Google, Open Source lisansı altında bulunan ve Google'ın sunucularından sunulan çeşitli yazı tiplerini Google Web Fonts sağlamaya başlamıştır.
Lisans Kısıtlamaları
Son olarak, WebFonts.info birlikte lisanslar dayalı Fonts available for @font-face embedding güzel wiki'd liste koydu. Kapsamlı bir liste olduğu iddia edilmez, ancak üzerine yazı tipleri (muhtemelen CSS dosyasındaki bir ilişkilendirme gibi koşullar dahil) gömülme/bağlama için kullanılabilir olmalıdır. lisanslarını okumak önemlidir, çünkü font yüklemelerinde açıkça ileri sürülmeyen bazı sınırlamalar vardır. Kontrol dışarı Typekit
Bu yazı tipinin bir lisansını yasal olarak ve çok fazla para satın almış olsanız bile, otomatik olarak bir font ve @ font-face-ize almanıza izin verilmediğini vurgulamakta fayda var. Bu tür bir elektronik yeniden dağıtıma izin verilip verilmediğini öğrenmek için yazı tipi lisansını kontrol etmeniz gerekir. İhlaller, özellikle de doğru yargı yetkisine sahip bir şirketseniz, aksi takdirde kolayca sorun yaratabileceği için tespit edilmesi ve trol yapılması çok kolaydır. –
FontSquirrel, hem önceden oluşturulmuş font kitlerinde hem de jeneratörü için açık bir noktadır (bu, fontların aslında bu tür kullanım için lisanslandığını doğrulamanızı gerektirir). Dışarıda başka dönüştürme araçları var, ancak hangisinin lisanslamayı tartıştığını bilmiyorum. – fencepost
Yanıtımı daha net hale getirmek için gözden geçirdim. – fencepost
Ve bu da pek olası değil - EOT yalnızca IE tarafından desteklenen oldukça kısıtlayıcı bir biçimdir. Safari 3.1 ve Firefox 3.1 (geçerli alfa) ve muhtemelen Opera 9.6, gerçek tip yazı tipini (ttf) katıştırmayı destekler ve en azından Safari, aynı mekanizma yoluyla SVG yazı tiplerini destekler. Ayrı bir liste, bu konuda iyi bir tartışmaya sahipti, bir süre back.
Hey, bu linki yayınlamak üzereydim, yerine yenilerini ekliyordum. – Kris
Bunu a while back numaralı telefondan sordum. Cevap temelde işe yaramıyor. Eğer kanama-kenar tarayıcısı olanlar sadece hitap etmeye istekli olmadıkça :(
true, referans için teşekkürler! –
Hayır, vücut tipi için iyi bir çözüm yoktur.
Microsoft WEFT vardır, kendi özel font-gömme teknolojisi ama yıllardır konuştuğunu duymadım ve onu kullanan kimseyi tanımıyorum
Ekran türü (başlıklar, blog yazılarının başlıkları, vb.) için sIFR ile alıyorum. vücut tipi için daha az yıpranan web-güvenli fontlar (Trebuchet MS gibi) Eğer tüm web-güvenli fontlardan sıkıldıysanız, muhtemelen bu terimi çok dar bir şekilde tanımlayabilirsiniz - büyük işletim sistemlerine sahip olan this matrix of stock fonts'a bakın ve şansın sensin Neredeyse tüm web kullanıcılarını yakalayacak bir yazı tipi dizisini bulabileceğim.
Örneğin: font-family: "Lucida Grande", "Verdana", sans-serif ortak bir yazı kaskad olduğu; OS X, Lucida Grande ile birlikte geliyor, ancak Windows'lu olanlar, Lucida Grande'ye benzer boyut ve şekildeki harfler içeren web güvenli bir yazı olan Verdana'yı alacak. Linux kullanıcıları, çoğu dağıtım sunucusunda bulunan web-güvenli font paketini kurduklarında Verdana'yı alacaklar ya da sıradan bir sans-serif'e geri dönecekler.
Bir dakikalığına sabun kutusu üzerinde duralım: Windows daha fazla "iyi" yazı tipine sahip olsaydı (OS X, tipografi tarihinin en büyük hitlerine sahipti: Futura, Helvetica, Gill Sans, vb.) yazı tipi seçerken kendimizi dizginlemek zorunda. Özgürlük de kötülük için kullanılabilir. – savetheclocktower
Yorumunuz hakkında yorum yok, ama cevabınız için teşekkürler. Bu harika. Bir yerlerde kaskadlar listesi var mı? Tekrar teşekkürler. –
İşte bir liste: (http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html). Bu muhafazakar, sadece platformlar arasında aynı (veya neredeyse o kadar) olan fontları listeliyor. Hangi "güvenli" yazı tipinin en çok "riskli" yazı tipine benzediğini görmek için bir karşılaştırma yapmanız gerekebilir. – savetheclocktower
Facetype.js deneyin, .TTF yazı tipini bir Javascript dosyasına dönüştürürsünüz. Tam SEO uyumlu, FF, IE6 ve Safari'yi destekler ve diğer tarayıcılarda incelikle ayrışır.
Çok çok havalı. Bunu kontrol edeceğim. –
Nasıl çalıştığını merak edenler için tuval etiketi (html 5) veya VML kullanır. –
Bu çözümle hemfikir olmak çok basit görünüyor ve attığım her tarayıcıda çalışıyor gibi görünüyor. – askon
, ticari bir seçeneği (onlar da kullanılabilen ücretsiz bir paket var).
Hangi tarayıcının kullanılmakta olduğuna bağlı olarak farklı teknikler kullanır (@font-face ve EOT biçimi) ve bunlar da sizin için tüm yazı tipi lisanslama sorunlarının üstesinden gelir. IE6'ya kadar her şeyi destekliyor.
İşte Typekit nasıl çalıştığı hakkında biraz daha fazla bilgi verilmiştir:
X-Ref [bir web sitesine bazı standart dışı yazı nasıl eklenir?] (Http:/[Web'de Yazı Tipleri] arasında /stackoverflow.com/q/107936/367456) – hakre
olası yinelenen (http://stackoverflow.com/questions/16233/fonts-on-the-web) – user2284570
@ Bu soru daha iyi sahip user2284570 Cevap. Diğerini bunun bir kopyası olarak kapattım. –