Soru HTML’de fontlar nasıl gömülür?


Web sayfalarına yazı tipi gömmek için iyi bir çözüm (özellikle SEO tarafında) anlamaya çalışıyorum. Şimdiye kadar gördüm W3C çözümüFirefox'ta bile çalışmıyor. bu oldukça havalı çözü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.

Teşekkürler!


76
2017-10-20 22:57


Menşei


X-Ref Bir web sitesine standart olmayan yazı tipi nasıl eklenir? - hakre
olası kopyası Web'de yazı tipleri - user2284570
@ user2284570 Bu sorunun daha iyi bir cevabı var. Diğerini bunun bir kopyası olarak kapattım. - Madara Uchiha♦


Cevaplar:


İşler değişti Bu soru başlangıçta soruldu ve cevaplandı. 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 bir araya getirdi Kurşun geçirmez @ font-yüz sözdizimi diğer birçok insandan gelen girişimleri birleştirmek. 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.

Makalesinden Snipped:

@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");
}

Bu tabandan çalışmak, Yazı tipi sincap dahil olmak üzere çeşitli yararlı araçlar bir araya getirmek @ yazı tipi yüz jeneratörü Bu, bir TTF veya OTF dosyası yüklemenize ve önceden oluşturulmuş CSS ve bir demo HTML sayfasıyla birlikte diğer türler için otomatik olarak dönüştürülmüş font dosyaları almanıza olanak tanır. Yazı tipi Sincap da var Yüzlerce @ font-yüz kiti.

Soma Design ayrıca bir araya getirdi FontFriend Bookmarkletyazı tiplerini uçtan bir sayfada yeniden tanımlıyor, böylece işleri deneyebilirsiniz. FireFox 3.6+ sürümünde sürükle ve bırak @ font-yüz desteği içerir.

Daha yakın zamanda, Google, Google Web Yazı TipleriAçık Kaynak lisansı altında bulunan ve Google'ın sunucularından sunulan çeşitli yazı tipleri.

Lisans Kısıtlamaları

Son olarak, WebFonts.info güzel bir wiki'd listesi oluşturdu Yazı tipi-yüz yerleştirme için kullanılabilir yazı tipleri lisanslara dayalı. 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ı okumak önemlidirÇünkü font yüklemelerinde açıkça öne sürülmeyen bazı sınırlamalar vardır.


127
2017-12-27 22:27



Bu yazı tipinin bir lisansını yasal olarak ve çok fazla para satın almış olsanız bile, otomatik olarak bir yazı tipi ve font-face-ize almanıza izin verilmediğini vurgulamaya değer olduğunu düşünüyorum. 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. - Pekka 웃
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
Büyüleyici şeyler. Merak etme, bu yazıya nasıl geçtin? Aynı günde birden fazla cevap vardı ve cevabınız hakkında birkaç yorum yapıldı. 1 ... - Dan Rosenstark
Nasıl sona erdiğini hatırlamıyorum - belki de HTML yazı tipini arayın, ama cevap verdim çünkü sadece Noel'den hemen önce bir müşteri için çalışıyordum, bu yüzden bilgiler yeniydi. Pekka'nın bunu eski bir görevde yeni etkinlik olarak gördüğünü varsayıyorum; Sistem bayraklarının birden çok bağlantı yayınlamaya çalışıp çalışmadığını bilmiyorum (başlangıçta engellendiğini biliyorum) ama bunun bir "spam olmadığına emin olmak için bunu kontrol et" şeklinde bir durum olabileceğini düşündüm. - fencepost


Deneyin Facetype.js.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.


9
2018-02-15 11:22



Çok çok havalı. Bunu kontrol edeceğim. - Dan Rosenstark
Nasıl çalıştığını merak edenler için tuval etiketi (html 5) veya VML kullanır. - Chris S
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
Bu bağlantı öldü. - aleclarson


Hayır, sadece kanama tarayıcılarına sahip olanlara hitap etmek istemediğiniz sürece, vücut tipi için iyi bir çözüm yoktur.

Microsoft var ATKIkendi özel font gömme teknolojisine sahipler, ancak yıllardır konuştuğunu duymadım ve bunu kullanan kimseyi tanımıyorum.

Ekran türü (başlıklar, blog yazılarının başlıkları, vb.) İçin sIFR ile ve vücut tipi (Trebuchet MS gibi) için daha az yıpranmış web güvenli yazı tiplerinden birini kullanıyorum. Tüm web güvenli fontlardan sıkıldıysanız, muhtemelen terimi çok dar bir şekilde tanımlayabilirsiniz. bu yazı tipi matrisi büyük işletim sistemleri ve şansları olan gemiler, neredeyse tüm web kullanıcılarını yakalayacak bir yazı tipi dizisini bulabileceksiniz.

Örneğin: font-family: "Lucida Grande", "Verdana", sans-serif yaygın bir yazı tipi çağlayanıdır; 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.


6
2017-10-20 23:17



Sabun kutusunda bir dakika durmama izin verin: keşke Windows daha fazla "iyi" yazı tipine sahip olsaydı (OS X, tipografi tarihinin en büyük hitlerine sahipti: Futura, Helvetica, Gill Sans, vb.), Bizim için iyi bir şey. yazı tiplerini seçerken kendimizi dizginlemek. Özgürlük de kötülük için kullanılabilir. - savetheclocktower
Yorumunuz hakkında yorum yok, ancak cevabı için teşekkürler. Bu harika. Bir yerlerde kaskadlar listesi var mı? Tekrar teşekkürler. - Dan Rosenstark
İşte bir liste: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
(Oh, ayrıca: her zaman genel bir geri dönüşü belirtin - sans-serif, serif veya monospace Bu şekilde, en azından oyun alanında olmalı, Yok İstediğiniz yazı tiplerinin.) - savetheclocktower
Çalıştığım sitelere gelen çoğu kullanıcı hala IE6'yı kullanıyor (bu piçler) Bu açıdan bakıldığında, en son ana sürümlerin kanama kenarı olduğunu düşünüyorum. - Gene


Ve olası değil - EOT sadece IE tarafından desteklenen oldukça kısıtlayıcı bir formattır. 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 bunun hakkında iyi bir tartışma yaptı. geri.


4
2017-10-20 23:06



Hey, bu linki yayınlamak üzereydim, bunun yerine yeni not aldım. - Kris


Çıkış yapmak Typekit, ticari bir seçenek (onlar da ücretsiz bir paket var).

Hangi tarayıcının kullanıldığına bağlı olarak farklı teknikler kullanır.@font-face vs. EOT format) ve sizin için tüm yazı tipi lisanslama sorunlarına da dikkat ediyorlar. IE6'ya kadar her şeyi destekliyor.

Typekit'in nasıl çalıştığı hakkında daha fazla bilgi:


3
2017-12-27 22:29





Bunu sordum bir süre önce. Cevap temelde işe yaramıyor. :(


2
2017-10-20 23:17



Doğru, referans için teşekkürler! - Dan Rosenstark