Jak dołączyć czcionkę .ttf za pomocą CSS?

120

Mam problem z kodem. Ponieważ chcę dołączyć globalną czcionkę do mojej strony i pobrałem plik .ttf. Umieszczam to w moim głównym CSS, ale moja czcionka się nie zmieni.

Oto mój prosty kod:

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

Nie wiem, gdzie popełniłem błąd. czy możesz mi z tym pomóc? Dzięki.

html css Jerielle
źródło
1
Czy możesz sprawdzić kartę Sieć w konsoli przeglądarki, aby upewnić się, że czcionka została poprawnie załadowana?
rink.attendant 6
Woff stąd
Mr. Alien
1
Czy na pewno poprawnie wpisałeś nazwę pliku czcionki? Nie powinno być oswald.regular.ttf?
1
Tak, dwukrotnie sprawdziłem nazwę mojej czcionki
Jerielle,
5
@Jerielle Masz więc czcionkę TTF z rozszerzeniem tff? Czy naprawdę jesteś tego pewien?

Odpowiedzi:

174

Samo dostarczenie pliku .ttf dla czcionek internetowych nie wystarczy do obsługi różnych przeglądarek. Obecnie najlepszą możliwą kombinacją jest użycie kombinacji jako:

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

Ten kod zakłada, że ​​masz czcionki internetowe w formacie .eot, .woff, .ttf i svg. Aby zautomatyzować cały ten proces, możesz skorzystać z: Transfonter.org .

Ponadto nowoczesne przeglądarki kierują się w stronę czcionki .woff, więc prawdopodobnie możesz to zrobić:

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

Przeczytaj więcej tutaj: http://css-tricks.com/snippets/css/using-font-face/

Poszukaj obsługi przeglądarki: Czy mogę użyć czcionki

Abhinav Gauniyal
źródło
a jeśli używasz GFonts, sprawdź stackoverflow.com/a/30585464/1727470
Samy Bencherif,
1
Dla takich jak ja, którzy łatwo się mylą - ścieżki są z ukośnikamiurl('path/to/font.woff')
wunth
Wystąpił problem z komentarzami w regule kroju czcionki. Przeniesienie komentarzy na koniec reguły rozwiązało problem.
Eric D'Souza
Okazało się, że czcionka, dla której chciałem wygenerować czcionkę internetową, znajduje się na czarnej liście Font Squirrel. Jednak transfonter.org działał dla mnie.
HotN
Miałem też kłopoty z Font Squirrel. sukces z font-converter.net
Peter Hayman
23

Czy próbowałeś formatu?

@font-face {
  font-family: 'The name of the Font Family Here';
  src: URL('font.ttf') format('truetype');
}

Przeczytaj ten artykuł: http://css-tricks.com/snippets/css/using-font-face/

Może również zależeć od przeglądarki.

user3883419
źródło
14

Możesz użyć kroju czcionki w następujący sposób:

@font-face {
  font-family:"Name-Of-Font";
  src: url("yourfont.ttf") format("truetype");
}
INTODAN
źródło
3

Wiem, że to stary post, ale to rozwiązało mój problem.

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

zauważ, src:url("../fonts/font-name.ttf");że używamy dwóch kropek, aby wrócić do katalogu głównego, a następnie do folderu czcionek lub do dowolnego miejsca, w którym znajduje się plik.

mam nadzieję, że to pomoże komuś zepsuć :) miłego kodowania

BlakeWebb
źródło