Bir web sitesine standart olmayan bir yazı tipi nasıl eklenir?

518

Görüntüler, Flash veya başka grafikler kullanmadan bir web sitesine özel yazı tipi eklemenin bir yolu var mı ?

Örneğin, bir düğün web sitesinde çalışıyordum ve bu konu için çok güzel yazı tipleri buldum. Ancak bu fontu sunucuya eklemenin doğru yolunu bulamıyorum. Ve bu yazı tipini CSS içeren HTML'ye nasıl eklerim? Bu grafik olmadan yapmak mümkün mü?

html  css  fonts  font-face 
— vaske
kaynak
18
Bu soru sorulduğundan beri, @font-faceçok daha yaygın bir şekilde desteklenmiştir ve genel kullanım için önerilir. IE'nin diğer tarayıcılara göre farklı bir yazı tipi gerektirdiğini bilmeniz gerekir. Bkz. Stackoverflow.com/questions/2219916/is-font-face-usable-now
— David Johnstone
10
Yazı tipini dağıtma hakkına sahip olduğunuzdan emin olun!
— Viet
2
Typekit.com'u ziyaret edin ya da ucuz fontsquirrel.com'u
— bjudson
1
— Adrien Be
3
www.fontsquirrel.com (önerilir aynı iyi kurşun geçirmez @fontface sözdizimi gerekli yazı dosyaları oluşturmak ve oluşturmak için harika görünüyor fontspring.com/blog/fixing-ie9-font-face-problems )
— Adrien Be

Yanıtlar:

500

Bu CSS ile yapılabilir:

<style type="text/css">
@font-face {
    font-family: "My Custom Font";
    src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont { 
    font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>

Bu edilir düzenli tarayıcılar tümü için desteklenen TrueType-yazı tipleri (TTF) veya Web Open Font Format (woff) kullanırsanız.

— hangy
kaynak
13
Hem Internet Explorer hem de Firefox Webkit'e dayalı DEĞİLDİR, bu yüzden bence oldukça işe yaramaz bir çözüm.
— Casper
58
Standart olduğu için işe yaramaz değil: ne kadar çok uygularsanız, tarayıcılar tarafından o kadar çok uygulanacaktır. Bu, telafi etmek için başka bir yol bulmamanız gerektiği anlamına gelmez, ancak bunu bir tamamlayıcı olarak kullanmak benim için iyi görünüyor.
— e-satis
8
Firefox 3.1 @ font-face özelliğini destekliyor.
— Ms2ger
2
@brendanjerwin: bağlantınızın güncellenmiş sürümü - brendanjerwin.com/development/web/2009/03/03/…
— Matt Ball
60
Hey millet, tahmin et ne oldu? Şimdi neredeyse 2016! Şimdi geniş çapta destekleniyor! Yaşasın! Sevindim, bu cevabı bu kadar geç buldum. Haha.
— jessica
121

Google Web Yazı Tipleri aracılığıyla bazı yazı tipleri ekleyebilirsiniz .

Teknik olarak, yazı tipleri Google'da barındırılır ve bunları HTML üstbilgisine bağlarsınız. Ardından, bunları CSS'de özgürce kullanabilirsiniz @font-face( okuyun ).

Örneğin:

In <head>bölümünde:

 <link href=' http://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'>

Sonra CSS'de:

h1 { font-family: 'Droid Sans', arial, serif; }

Çözüm oldukça güvenilir görünüyor ( Smashing Magazine bile bir makale başlığı için kullanıyor. ). Ancak, Google Yazı Tipi Dizini'nde şu ana kadar çok fazla yazı tipi yok .

— Michał Pękała
kaynak
1
Temmuz 2014'te google yazı tiplerini genişletti ve google.com/get/noto/# dillerini destekleyen Google Noto yazı tiplerini dahil etti . Abobe, tüm dilleri destekleyen bu açık font girişimini desteklemiştir blog.typekit.com/2014/07/15/introducing-source-han-sans
— vsingh
(Google web fontları) fontların .eot ve .woff ve .svg sürümlerini desteklemiyor gibi görünüyor. sadece yazı tiplerinin .ttf sürümünü destekler!
— Mehdi Jazini
77

Gidilecek yol, yazarların web sayfalarında metin görüntülemek için çevrimiçi yazı tiplerini belirlemelerine izin veren @ font-face CSS bildirimini kullanmaktır. Yazarların kendi yazı tiplerini sağlamalarına izin vererek @ font-face, kullanıcıların bilgisayarlarına yüklediği sınırlı sayıda yazı tipine bağlı olma ihtiyacını ortadan kaldırır.

Aşağıdaki tabloya bir göz atın:

resim açıklamasını buraya girin

Gördüğünüz gibi, temel olarak çapraz tarayıcı uyumluluğu nedeniyle bilmeniz gereken birkaç biçim var. Mobil cihazlardaki senaryo çok farklı değil.

Çözümler:

1 - Tam tarayıcı uyumluluğu

Şu anda mümkün olan en derin desteğe sahip yöntem budur:

@font-face {
  font-family: 'MyWebFont';
  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 */
}

2 - Tarayıcının çoğu

İşler yine de WOFF'a doğru kayıyor , bu yüzden muhtemelen kaçabilirsiniz :

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont.woff') format('woff'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
       url('myfont.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

3 - Yalnızca en yeni tarayıcılar

Ya da sadece WOFF.
Daha sonra şu şekilde kullanırsınız:

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

Kaynaklar ve Diğer Kaynaklar:

Bu özelliği uygulamak için bilmeniz gerekenler budur. Eğer konuyla ilgili daha fazla araştırma yapmak istiyorsanız, aşağıdaki kaynaklara göz atmaya teşvik edeceğim. Buraya koyduğum şeylerin çoğu aşağıdakilerden çıkarılıyor

— Javier Cadiz
kaynak
2
Son derece kullanışlı Font Sincap aracı , tam tarayıcı desteği için gereken CSS'yi oluşturabilir. Yazı tipini bu biçimlerden herhangi biri olarak yüklemenize, diğer tüm biçimlere dönüştürmenize ve hepsini indirmenize izin verir. Özel yazı tipleri söz konusu olduğunda hayat kurtarıcıdır.
— Jacob Stamm
Ne anlama geliyor svgFontName? Yazı tipi aile adımı değiştirmeli miyim yoksa olduğu gibi bırakmalı mıyım?
— Gherman
17

Standart olmayan yazı tipiyle, standart biçimdeki özel yazı tipini kastediyorsanız, bunu nasıl yaparım ve şimdiye kadar kontrol ettiğim tüm tarayıcılar için çalışır:

@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.eot") /* EOT file for IE */
}
@font-face {
    font-family: TempestaSevenCondensed;
    src: url("../fonts/pf_tempesta_seven_condensed.ttf") /* TTF file for CSS3 browsers */
}

bu nedenle hem ttf hem de eot fontlarına ihtiyacınız olacak. Bazı araçlar çevrimiçi kullanılabilir dönüşüm yapabilirsiniz.

Ancak, yazı tipini standart olmayan bir biçimde (bitmap'ler vb.) Eklemek istiyorsanız, size yardımcı olamam.

— BiAiB
kaynak
1
Çevrimiçi araç örneği: kirsle.net/wizards/ttf2eot.cgi Çevrimdışı araç örneği: code.google.com/p/ttf2eot/wiki/Demo - WOFF yazı tiplerini kullanmak da mümkün olmalıdır .
— Wilf
11

Bir web sitesinde standart olmayan yazı tiplerine sahip olmanın en kolay yolunun sIFR kullanmak olduğunu gördüm

Yazı tipini içeren bir Flash nesnesinin kullanımını içerir, ancak Flash yüklü değilse standart metne / yazı tipine güzel bir şekilde düşer.

Stil CSS'nizde ayarlanır ve JavaScript metniniz için Flash değişimini ayarlar.

Düzenleme: (SIFR bir projeye zaman eklediğinden ve bakım gerektirebileceğinden, standart olmayan yazı tipleri için görüntüleri kullanmanızı öneririm).

— Mat
kaynak
24
Ne korkunç bir fikir! Tarayıcımda flaş var ama flashblock da var. Bu web sitesinde, tarayıcımda korkunç bir tahrif edilmiş sayfa var. Flash, büyük animasyonlar veya filmler için kullandığınız bir şeyde kalmalıdır. Çok fazla flash wery anoying ve visualy, benim benim ...
— e-satis
2
@ e-satis: Nasıl yani? Şahsen, sIFR kullanan bir sayfa ile ince olmayan metin oluşturma farklılıklarının yanı sıra, fark etmeyen bir sayfa arasındaki farkı asla fark etmiyorum. Bence harika bir fikir, dürüst olmak gerekirse, @font-facedesteklendiği yerlerde çok daha iyi.
— Sasha Chedygov
"Düzenle: (Hala sIFR bir projeye zaman eklediğinden ve bakım gerektirebileceğinden, standart olmayan yazı tipleri için resimler kullanmanızı öneririm." Çok güzel söyledi. sIFR gerçekten harika bir teknik ama istediğiniz EXACT görünümünü elde etmek için çok şey gerekiyor gibi görünüyor. Bu tekniği öğrenmek ve ustalaşmak için zamanınız varsa, kesinlikle tavsiye ederim. Ancak hızlı ve kolay bir yazı tipi değiştirme tekniği arıyorsanız, görüntü değiştirme veya hatta @ font-face css özelliğini kullanırım
— Derek Adair
10

Typeface.js ve Cufon diğer iki ilginç seçenektir. Bunlar, Internet Explorer dışındaki tüm yeni tarayıcılarda ve Internet Explorer'da VML aracılığıyla özel yazı tipi verilerini JSON biçiminde ( web sitelerinde TrueType veya OpenType biçimlerinden dönüştürebilirsiniz) oluşturan JavaScript bileşenleridir .

Her ikisinde de ana sorun (şu andan itibaren) metin seçmenin işe yaramadığı veya en azından oldukça garip bir şekilde çalıştığıdır.

Yine de, manşetler için çok güzel. Gövde metni ... Bilmiyorum.

Ve şaşırtıcı derecede hızlı.

— Thomas
kaynak
Bir başka ilginç seçenek typekit.com Benzer kavram.
— Zack,
8

Veya sIFR'yi deneyebilirsiniz . Flash kullandığını biliyorum, ancak yalnızca mevcutsa. Flash kullanılamıyorsa, orijinal metni orijinal (CSS) yazı tipinde görüntüler.

— Casper
kaynak
4

W3C'nin bunu yapmasını önerdiği tekniğe "gömme" denir ve buradaki üç makale tarafından iyi açıklanmıştır: Gömme Fontlar . Sınırlı deneylerimde, bu işlemi hataya eğilimli buldum ve çok tarayıcılı bir ortamda işlevini yerine getirmede sınırlı bir başarı elde ettim.

— Steve Moyer
kaynak
4

Safari ve Internet Explorer'ın ikisi de CSS @ font-face kuralını destekler, ancak iki farklı gömülü font tipini destekler. Firefox bir süre sonra Apple ile aynı türü desteklemeyi planlıyor. SVG yazı tiplerini gömebilir ancak henüz geniş çapta desteklenmemektedir (eklenti olmadan).

Gördüğüm en taşınabilir çözüm, başlıkları vb. Sunucuda oluşturduğunuz ve seçtiğiniz yazı tipinizle önbelleğe alınan bir resim ile değiştirmek için bir JavaScript işlevi kullanmaktır - bu şekilde metni güncellersiniz ve Photoshop'ta bir şeyler.

— zobier
kaynak
Bunun JavaScript ile yapılması gerekmez. Pek çok insanın bugünlerde birkaç şey için JavaScript kullanmayı sevdiğini biliyorum, ancak burada standart bir CSS tekniği daha uygun olabilir. Bkz. Sitepoint.com/article/header-images-css-xhtml
— hangy
Karışıklık varsa üzgünüm, teknik, söylediğiniz gibi CSS olabilen görüntü değiştirme yöntemini ifade etmiyor. Belirli bir yazı tipinde / stilde, anında, sunucuda belirli bir dizeyi temsil eden grafikler oluşturmakla ilgilidir - bunları manuel olarak oluşturma ihtiyacını ortadan kaldırır.
— zobier
4

ASP.NET kullanıyorsanız, gerçekte sunucuya yazı tiplerini (kurulu yazı tipi tabanına eklerken olduğu gibi) yüklemeye gerek kalmadan görüntü tabanlı yazı tipleri oluşturmak gerçekten kolaydır:

PrivateFontCollection pfont = new PrivateFontCollection();
pfont.AddFontFile(filename);
FontFamily ff = pfont.Families[0];

ve sonra o yazı tipiyle a Graphics.

— mattlant
kaynak
1
iyi, evet ... Ve siz kullanıcı kopyalama ve yapıştırma hakkında unutabilirsiniz. Eski tarayıcılarda da yakınlaştırma. Bant genişliği sorunları hakkında bile konuşmuyorum!
— e-satis
2
Evet, tamam ve soru bunun içerik metni için kullanılacağını mı belirtti? Hayır olmadı, genel bir soruydu ve bu genel bir cevaptı. Küçük metin parçacıkları, üstbilgiler, vb. Çok fazla bant genişliği almaz. Şeyh, kavrayın!
— mattlant
3

Biraz araştırma yaptım ve Dinamik Metin Değiştirme'yi kazdım (2004-06-15 yayınlandı).

Bu teknik görüntüleri kullanır, ancak "eller serbest" gibi görünmektedir. Metninizi yazıyorsunuz ve birkaç otomatik komut dosyasının sayfada sizin için otomatik olarak bul ve değiştir yapmasına izin veriyorsunuz.

Bazı sınırlamaları vardır, ancak muhtemelen gördüğüm diğerlerinden daha kolay seçimlerden (ve daha fazla tarayıcı uyumlu) biridir.

— Kent Fredric
kaynak
3

WOFF yazı tiplerini kullanmak da mümkündür - örnek burada

@font-face {
font-family: 'Plakat Fraktur';
src: url('/resources/fonts/plakat-fraktur-black-modified.woff') format('woff');
font-weight: bold;
font-style: normal;
 }
— Wilf
kaynak
3

Sadece bunun gibi gerçek yazı tipine bağlantı sağlayın ve gitmek için iyi olacaksınız

<!DOCTYPE html>
<html>
<head>
<link href='https://fonts.googleapis.com/css?family=Montserrat'   rel='stylesheet'>
<style>
body {
font-family: 'Montserrat';font-size: 22px;
}
</style>
</head>
<body>

<h1>Montserrat</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>


</body>
</html>
— Abhijeet Kumar
kaynak
İyi, basit bir alternatif. Ve bunu kullanma haklarına sahip olduğunuzdan emin olabilirsiniz. Developers.google.com/fonts/docs/getting_started sayfasına
— Tim Erickson
2

Typeface.js JavaScript Yolu:

Typeface.js ile web sayfalarınıza özel fontlar gömebilirsiniz, böylece görüntülere metin oluşturmak zorunda kalmazsınız

Sitenizin grafik metnini istediğiniz yazı tipinde göstermek için resim oluşturmak veya flash kullanmak yerine, typeface.js'yi kullanabilir ve ziyaretçileriniz yerel olarak yüklenmiş yazı tipine sahip gibi düz HTML ve CSS yazabilirsiniz.

http://typeface.neocracy.org/

— bakkal
kaynak
2

Yazı tipinizin bir dosyası varsa, diğer tarayıcılar için bu yazı tipinin daha fazla biçimini eklemeniz gerekir.

Bu amaçla Fontsquirrel gibi yazı tipi oluşturucuyu kullanıyorum , tüm yazı tipi biçimlerini ve @ yazı tipi yüzü CSS'sini sağlıyor, sadece CSS dosyanıza sürükleyip bırakmanız yeterli olacak.

— saadeez
kaynak
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.