Web tarayıcılarında .otf yazı tiplerini kullanma

440

Çevrimiçi yazı tipi denemeleri gerektiren bir web sitesi üzerinde çalışıyorum, tüm fontlar .otf

Yazı tiplerini gömmenin ve tüm tarayıcılarda çalışmasını sağlamanın bir yolu var mı?

Değilse, başka hangi alternatiflerim var?

— Naruto
kaynak

Belki javascript buradaki etiket listesinden kaldırılmalıdır?

— kzh

754

OTF@ Font-face komutunu kullanarak yazı tipinizi uygulayabilirsiniz :

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWeb.otf") format("opentype");
}

@font-face {
    font-family: GraublauWeb;
    font-weight: bold;
    src: url("path/GraublauWebBold.otf") format("opentype");
}

Ancak çok çeşitli modern tarayıcıları desteklemek istiyorsanız, yazı tiplerine geçmenizi WOFFve TTFyazı tiplerini kullanmanızı öneririm . WOFFtür her büyük masaüstü tarayıcısı tarafından uygulanırken, TTFtür eski Safari, Android ve iOS tarayıcıları için bir geri dönüştür. Yazı tipiniz ücretsiz bir yazı tipiyse , örneğin çevrimiçi bir yazı tipi dönüştürücü kullanarak yazı tipinizi dönüştürebilirsiniz .

@font-face {
    font-family: GraublauWeb;
    src: url("path/GraublauWebBold.woff") format("woff"), url("path/GraublauWebBold.ttf")  format("truetype");
}

Hala orada olan hemen hemen her tarayıcıyı desteklemek istiyorsanız (artık IMHO'ya gerek yok), aşağıdaki gibi bazı yazı tipi türlerini eklemelisiniz:

@font-face {
    font-family: GraublauWeb;
    src: url("webfont.eot"); /* IE9 Compat Modes */
    src: url("webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
         url("webfont.woff") format("woff"), /* Modern Browsers */
         url("webfont.ttf")  format("truetype"), /* Safari, Android, iOS */
         url("webfont.svg#svgFontName") format("svg"); /* Legacy iOS */
}

Tüm bu türlerin neden uygulandığı ve bunların saldırıları hakkında daha fazla bilgiyi buradan edinebilirsiniz . Hangi dosya türlerinin hangi tarayıcılar tarafından desteklendiğini ayrıntılı olarak görmek için bkz:

@ font-face Tarayıcı Desteği

EOT Tarayıcı Desteği

WOFF Tarayıcı Desteği

TTF Tarayıcı Desteği

SVG-Fonts Tarayıcı Desteği

Bu yardımcı olur umarım

— seçimi
kaynak

Neredeyse tüm tarayıcılarda gayet iyi çalıştı ... Çalışmayan tek tarayıcı FireFox Linux ... Bunun için herhangi bir öneriniz var mı?

— Naruto

Bunu bir Windows sunucusunda barındırıyorsanız, .otf dosya türünü geçerli ve sunulan bir dosya türü olarak eklemeniz gerektiğini unutmayın. Sorunun bu olduğunu görmenin tek yolu yazı tipine olan bağlantıyı takip etmektir (eğer öyleyse 404 hatası). Test için geçici olarak .ttf veya hatta .html olarak yeniden adlandırabilirsiniz. IE tarafından desteklenen tek web yazı tipleri WOFF biçimidir. (Hayır, hiç duymadım!)

— Henrik Erlandsson

Hey, bu yazı tipinin performansına ne dersin? İyi mi? Yoksa diğeri daha mı iyi?

— Anggie Aziz

"Kod örneklerinde tırnak işaretleri ( ) eksik mi?

— steffen

Görünüşe göre otf hemen hemen tahta genelinde çalışmalıdır caniuse.com/#search=otf

— Stephen

Gönderen Google Yazı Dizini örnekler:

@font-face {
  font-family: 'Tangerine';
  font-style: normal;
  font-weight: normal;
  src: local('Tangerine'), url('http://example.com/tangerine.ttf') format('truetype');
}
body {
  font-family: 'Tangerine', serif;
  font-size: 48px;
}

Bu .ttf ile çapraz tarayıcı çalışır, .otf ile çalışabileceğine inanıyorum. ( Wikipedia .otf çoğunlukla .ttf ile geriye dönük olarak uyumludur diyor) Değilse , .otf dosyasını .ttf'ye dönüştürebilirsiniz .

İşte bazı iyi siteler:

İyi astar:

http://www.alistapart.com/articles/cssatten
Diğer Bilgiler:

http://randsco.com/index.php/2009/07/04/p680

— KZH
kaynak