Herhangi bir web sayfasına Ubuntu yazı tipi gömme


Yanıtlar:


25

Ubuntu yazı tipini web sitenize yerleştirebileceğiniz 2 yöntem vardır - Google Yazı Tipi Dizini'ni (tercih edilir) veya @font-faceCSS bildirimini kullanarak ve yazı tiplerinizi manuel olarak dönüştürür.

Google Web Yazı Tiplerini Kullanma

Artık Ubuntu yazı tipini Google web yazı tipi olarak kullanabilirsiniz. Bu, süreci çok daha basit hale getirecektir. Cevabın bu bölümünün içeriğinin çoğu, sladen'in cevabından geliyor .

Google Font API'sını neden tercih edilen yöntem kullanıyor?

Google Font API'sını kullanmak, web fontlarının tüm modern tarayıcılarda ayrıntılar hakkında endişelenmenize gerek kalmadan otomatik olarak çalışmasına izin verdiği için mükemmel bir öneri. Font API'sini kullanmak, ziyaretçilerin yazı tipinin en son sürümünü her zaman otomatik olarak göreceği anlamına gelir .

Google Yazı Tipi API'sını nasıl kullanabilirim?

21 Aralık 2010'dan bu yana Ubuntu Yazı Tipi Ailesi artık Google Yazı Tipi API'sına dahil edildi ve konuşlandırılabilir:

Haberler hakkında Google Web Yazı Tipi yayınını okuyabilir ve ardından:

  1. Google Yazı Tipi Dizini'ni açın: " Ubuntu - Bu yazı tipini kullan " sayfası
  2. Web sayfanız için ihtiyacınız olan Normal, İtalik, Kalın ve Kalın-İtalik'ten ağırlık ve stil kombinasyonunu işaretleyin .

    alternatif metin

  3. Varsayılan yanlışsa, ihtiyacınız olan dil / kod kombinasyonunu seçin : İngilizce örneklere sahip bir Rusça web sitesi "Kiril, Latince" kullanabilir.

    alternatif metin

  4. HTML sayfanızda veya şablonlarınızda verilen <link>etiketi <head> ... </head>ekleyin ve içindeki <style> ... </style>etiketler arasına uygun CSS kodunu ekleyin <head>.

    Örneğin, Rusça / İngilizce karma web sitesini oluşturuyorsanız ve yazı tipini tüm metinler için varsayılan olarak kullanmak istiyorsanız, <head>etiketlerinize aşağıdaki kodu ekleyebilirsiniz :

    <link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=cyrillic,latin' rel='stylesheet' type='text/css' />
    <style type="text/css" >
        body {
            font-family : 'Ubuntu', sans-serif;
        }
    </style>
    

Notlar :

"Latin" dir komut İngilizce ve diğer birçok Avrupa ve Afrika dilleri ile yazılmış olduğunu.

"Altküme" yalnızca belirli diller için karakter göndererek yazı tipi dosyalarını en iyi duruma getirir, yazı tipleri her biri yaklaşık 44 kB'dir. Şu anda gösterilen 168 kB rakam, 1.200+ glif için tek bir web yazı tipi indirmesi içindir ve çoğu tek bir web sitesi için gerekli değildir.

Ubuntu yazı tipi dosyaları, farklı tarayıcılar için otomatik olarak doğru biçimde dönüştürülür; markasına ve sürümüne bağlı gerekli biçimidir WOFF, EOT, SVGveya TTF. Doğru CSS kombinasyonu her sayfa isteğine özeldir ve bu zor sorunu sihirli bir şekilde çözer.

@ Font-face kullanma

Sen Ubuntu fontları gömebilirsiniz dönüştürerek için woff yazı . Daha sonra bunları CSS @ font-face bildirimini kullanarak gömebilirsiniz. Yazı tiplerini (.ttf dosyaları) bulabilirsiniz /usr/share/fonts/truetype/ubuntu-font-family.

Örneğin, bir WOFF dosyasına dönüştürülen Ubuntu Normal yazı tipini kullanmak için Ubuntu-R.woff, şu CSS kodunu kullanın:

@font-face
{
    font-family : "Ubuntu-R";
    src: url('Ubuntu-R.woff');
}

Benzer şekilde Ubuntu Bold için:

 @font-face
{
    font-family : "Ubuntu";
    src: url('Ubuntu-B.woff');
    font-weight : bold;
}

Ubuntu İtalik:

@font-face 
{
    font-family : "Ubuntu";
    src: url('Ubuntu-I.woff');
    font-style : italic;
}

Ubuntu Kalın İtalik:

@font-face
{
    font-family : "Ubuntu";
    src: url('Ubuntu-BI.woff');
    font-weight : bold;
    font-style : italic;
}

Bu, tüm yeni tarayıcılar tarafından desteklenmektedir .

hususlar

Bazı kullanıcıların tarayıcılarını belirli bir yazı tipi kümesi kullanacak şekilde ayarladıklarını ve özel yazı tipleri kullanılırsa rahatsız olabileceğini lütfen unutmayın. Ayrıca, yazı tipinin nasıl dağıtılabileceğine ilişkin kesin koşullar için Ubuntu Yazı Tipi Lisansını okuyun .


@ DKuntz2 - bu gerçekten daha iyi; Şimdi cevabımı değiştirdim.
dv3500ea

Sladen'in cevabını kopyalama ihtiyacını anlamadım. Neden sadece düzenlemiyorsun?
papukaija

Bu soruyu katledilmeden uzun süre önce @ font-face yöntemini özetleyerek yanıtladım. Bu, yazı tipinin Google Yazı Tipi API'sına eklenmesinden önceydi (daha iyi bir yöntemdir). Cevabımın başına sadece kısa bir not ekledim ve sladen çok daha kapsamlı bir şekilde cevap verdi ve google yöntemini kullanmak için daha iyi bir cevabım vardı.
dv3500ea

1
Ancak, şu anda cevabım kabul edildi ve son derece yükseltildi ve sonuç, insanların daha az tercih edilen @ font-face yöntemini kullanmaları gerektiğini düşünebilmeleriydi. sladen bu konuda e-posta yoluyla benimle iletişime geçti ve bu sitenin reklam öğesi ortak lisansının gerektirdiği şekilde atıfta bulunarak cevabımı değiştirmeyi kabul ettim.
dv3500ea

10

Google Font API'sını kullanmak, web fontlarının tüm modern tarayıcılarda ayrıntılar hakkında endişelenmenize gerek kalmadan otomatik olarak çalışmasına izin verdiği için mükemmel bir öneri. Font API'sini kullanmak, ziyaretçilerin yazı tipinin en son sürümünü her zaman otomatik olarak göreceği anlamına gelir .

21 Aralık 2010'dan bu yana Ubuntu Yazı Tipi Ailesi artık Google Yazı Tipi API'sına dahil edildi ve konuşlandırılabilir:

Haberler hakkında Google Web Yazı Tipi yayınını okuyabilir ve ardından:

  1. Google Yazı Tipi Dizini'ni açın: " Ubuntu - Bu yazı tipini kullan " sayfası
  2. Web sayfanız için ihtiyacınız olan Normal, İtalik, Kalın ve Kalın-İtalik'ten ağırlık ve stil kombinasyonunu işaretleyin .
  3. Varsayılan yanlışsa, ihtiyacınız olan dil / kod kombinasyonunu seçin : İngilizce örneklere sahip bir Rusça web sitesi "Kiril, Latince" kullanabilir.
  4. Kopyalayıp yapıştırın CSS iki satır halinde <head> ... </head>ve <style>...</style>HTML sayfası veya şablon bölümleri.

Notlar:

"Latin" dir komut İngilizce ve diğer birçok Avrupa ve Afrika dilleri ile yazılmış olduğunu.

"Alt küme", yalnızca belirli diller için karakterler göndererek yazı tipi dosyalarını en iyi duruma getirir, yazı tipleri her biri yaklaşık 44 kB'dir. Şu anda gösterilen 168 kB rakam, 1.200+ glif için tek bir web yazı tipi indirmesi içindir ve çoğu tek bir web sitesi için gerekli değildir.

Ubuntu yazı tipi dosyaları, farklı tarayıcılar için otomatik olarak doğru biçimde dönüştürülür; markasına ve sürümüne bağlı gerekli biçimidir WOFF, EOT, SVGveya TTF. Doğru CSS kombinasyonu her sayfa isteğine özeldir ve bu zor sorunu sihirli bir şekilde çözer.


8

Sunucu tarafı yazı tipi oluşturma (belki daha iyi "dinamik yazı tipi oluşturma") oldukça uzun bir süredir ilginç bir konudur.

Teknik olarak, bir makinenin belirli bir yazı tipini görüntülemesi için zaten yerel olarak kurulmuş olması mantıklı görünmektedir.

Öte yandan, web tasarımı temel / iyi bilinen 'web yazı tiplerine' bağlı kalmakla çok kaybeder.

CSS2.1, @ font-face kuralı bildirimini kullanarak bazı iyileştirmeler yapmıştır .
Henüz bir standart haline gelmedi, ancak sonunda CSS3 ile olacak.

Bunun yanı sıra, birkaç alternatif yöntem vardır, örneğin:

Umarım sağlanan bağlantılar size ne yapılabilir ;-) hakkında daha iyi bir fikir verecektir

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.