CSS kullanarak .ttf yazı tipi nasıl eklenir?


120

Kodumla ilgili bir sorunum var. Çünkü sayfam için genel bir yazı tipi eklemek istiyorum ve bir .ttf dosyası indirdim. Ve bunu ana CSS'ye ekledim ama yazı tipim değişmeyecek.

İşte benim basit kodum:

@font-face {
    font-family: 'oswald';
    src: url('/font/oswald.regular.ttf');
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    font-size:100%;
    font:inherit;
    font-family: oswald;
    vertical-align:baseline
} 

Nerede yanlış yaptım bilmiyorum. Bana bu konuda yardımcı olabilir misin? Teşekkürler.


1
Yazı tipinin düzgün yüklendiğinden emin olmak için tarayıcınızın konsolundaki Ağ sekmesini kontrol edebilir misiniz?
rink.attendant. 6

Dan woff alın burada
Sayın Alien

1
Yazı tipi dosyası adını doğru yazdığınızdan emin misiniz? Olması gerekmiyor oswald.regular.ttfmu?

1
Evet, yazı
tipimin

5
@Jerielle Yani uzantısı olan bir TTF yazı tipiniz var tff? Bundan gerçekten emin misin?

Yanıtlar:


174

Tarayıcılar arası destek için sadece webfont için .ttf dosyası sağlamak yeterli olmayacaktır. Şu anda mümkün olan en iyi kombinasyon, kombinasyonu şu şekilde kullanmaktır:

@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 */
}

Bu kod, web yazıtipi için .eot, .woff, .ttf ve svg formatına sahip olduğunuzu varsayar. Tüm bu süreci otomatikleştirmek için şunu kullanabilirsiniz: Transfonter.org .

Ayrıca, modern tarayıcılar .woff yazı tipine doğru kaymaktadır, bu nedenle muhtemelen bunu da yapabilirsiniz:

@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 */
}  

Daha fazlasını buradan okuyun: http://css-tricks.com/snippets/css/using-font-face/


Tarayıcı desteğine bakın: Fontface kullanabilir miyim



1
Benim gibi kolayca url('path/to/font.woff')
karışanlar

Yazı tipi yüzü kuralındaki yorumlarla ilgili bir sorun yaşadım. Yorumların kuralın sonuna taşınması sorunu çözdü.
Eric D'Souza

Web fontu oluşturmak istediğim fontun Font Squirrel'den kara listeye alınmış olduğunu buldum. Ancak transfonter.org benim için çalıştı.
HotN

Font Squirrel ile de sorun yaşadım. font-converter.net ile başarı
Peter Hayman


14

Yazı tipi yüzünü şu şekilde kullanabilirsiniz:

@font-face {
  font-family:"Name-Of-Font";
  src: url("yourfont.ttf") format("truetype");
}

3

Bunun eski bir gönderi olduğunu biliyorum ama bu sorunumu çözdü.

@font-face{
  font-family: "Font Name";
  src: url("../fonts/font-name.ttf") format("truetype");
}

src:url("../fonts/font-name.ttf");kök dizine ve ardından yazı tipi klasörüne veya dosyanızın bulunduğu yere geri dönmek için iki nokta kullandığımıza dikkat edin.

umarım bu hattın aşağısında birine yardımcı olur :) mutlu kodlama

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.