Jak dodać niestandardową czcionkę do strony internetowej?

518

Czy istnieje sposób dodania niestandardowej czcionki na stronie internetowej bez użycia obrazów, Flasha lub innej grafiki?

Na przykład pracowałem nad stroną ślubną i znalazłem wiele fajnych czcionek na ten temat. Ale nie mogę znaleźć odpowiedniego sposobu na dodanie tej czcionki na serwerze. I jak dołączyć tę czcionkę z CSS do HTML? Czy można to zrobić bez grafiki?

html css fonts font-face vaske
źródło
18
Ponieważ pytanie zostało zadane, @font-facestało się znacznie szerzej obsługiwane i jest zalecane do ogólnego użytku. Musisz tylko wiedzieć, że IE wymaga czcionek w innym formacie niż inne przeglądarki. Zobacz stackoverflow.com/questions/2219916/is-font-face-usable-now
David Johnstone
10
Upewnij się, że masz prawo rozpowszechniać czcionkę!
Viet
2
Odwiedź typekit.com lub taniego fontsquirrel.com
bjudson
1
powiązane stackoverflow.com/questions/8050640/…
Adrien Be
3
www.fontsquirrel.com wydaje się być świetnym narzędziem do generowania wymaganych plików czcionek i stworzenia dobrej kuloodpornej składni @fontface (takiej samej jak zalecana fontspring.com/blog/fixing-ie9-font-face-problems )
Adrien Be

Odpowiedzi:

500

Można to zrobić za pomocą CSS:

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

Jest obsługiwany we wszystkich zwykłych przeglądarkach, jeśli używasz czcionek TrueType (TTF) lub formatu otwartych czcionek internetowych (WOFF).

hangy
źródło
13
Zarówno Internet Explorer, jak i Firefox NIE są oparte na Webkit, więc moim zdaniem jest to dość bezużyteczne rozwiązanie.
Casper
58
Nie jest bezużyteczny, ponieważ jest standardowy: im więcej go wdrażasz, tym bardziej będzie on prawdopodobnie implementowany przez przeglądarki. Nie oznacza to, że nie powinieneś znaleźć innego sposobu na rekompensatę, ale użycie tego jako uzupełnienia wydaje mi się dobre.
e-satis,
8
Firefox 3.1 obsługuje jednak @ font-face.
Ms2ger,
2
@brendanjerwin: zaktualizowana wersja twojego linku - brendanjerwin.com/development/web/2009/03/03/...
Matt Ball
60
Hej, zgadnijcie co? Jest już prawie 2016! Jest teraz szeroko obsługiwany! Tak! Cieszę się, że znalazłem tę odpowiedź tak późno. Ha ha.
jessica,
121

Możesz dodać niektóre czcionki za pomocą Google Web Fonts .

Technicznie czcionki są hostowane w Google, a ty łączysz je w nagłówku HTML. Następnie możesz swobodnie z nich korzystać w CSS @font-face( czytaj o tym ).

Na przykład:

W <head>dziale:

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

Następnie w CSS:

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

Rozwiązanie wydaje się dość niezawodne (nawet Smashing Magazine używa go do tytułu artykułu ). W Google Font Directory nie ma jednak zbyt wielu czcionek .

Michał Pękała
źródło
1
W lipcu 2014 r. Google rozszerzył czcionki i zawarł czcionki Google Noto, które obsługują większość języków google.com/get/noto/# . Abobe poparł tę inicjatywę otwartej czcionki obsługującą wszystkie języki blog.typekit.com/2014/07/15/introducing-source-han-sans
vsingh
wygląda na to, że (czcionki internetowe Google) nie obsługują wersji czcionek .eot i .woff i .svg. obsługuje tylko wersje czcionek .ttf!
Mahdi Jazini,
77

Najlepszym sposobem jest użycie deklaracji CSS @ font-face, która pozwala autorom określać czcionki online do wyświetlania tekstu na swoich stronach internetowych. Umożliwiając autorom dostarczanie własnych czcionek, @ font-face eliminuje potrzebę polegania na ograniczonej liczbie czcionek zainstalowanych przez użytkowników na ich komputerach.

Spójrz na następującą tabelę:

wprowadź opis zdjęcia tutaj

Jak widać, istnieje kilka formatów, o których należy wiedzieć, głównie ze względu na kompatybilność z różnymi przeglądarkami. Scenariusz na urządzeniach mobilnych nie różni się zbytnio.

Rozwiązania:

1 - Pełna zgodność przeglądarki

To jest metoda z najgłębszym możliwym wsparciem w tej chwili:

@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 - większość przeglądarki

Jednak sprawy mocno się przesuwają w kierunku WOFF , więc prawdopodobnie możesz uciec od:

@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 - tylko najnowsze przeglądarki

A nawet po prostu WOFF.
Następnie użyj go w następujący sposób:

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

Referencje i dalsza lektura:

To przede wszystkim powinieneś wiedzieć o implementacji tej funkcji. Jeśli chcesz dowiedzieć się więcej na ten temat, zachęcam do zapoznania się z następującymi zasobami. Większość tego, co tu umieściłem, pochodzi z poniższych

Javier Cadiz
źródło
2
Niezwykle przydatne narzędzie Font Squirrel może wygenerować CSS potrzebny do obsługi pełnej przeglądarki. Pozwala nawet załadować czcionkę w jednym z tych formatów, konwertuje ją na wszystkie pozostałe formaty i pozwala pobrać je wszystkie. To oszczędność życia, jeśli chodzi o niestandardowe czcionki.
Jacob Stamm
Co oznacza svgFontNameskrót Czy powinienem zmienić nazwę mojej rodziny czcionek, czy pozostawić taką, jaka jest?
Gherman,
17

Jeśli przez niestandardową czcionkę masz na myśli niestandardową czcionkę standardowego formatu, oto jak to zrobić i działa dla wszystkich przeglądarek, które sprawdziłem do tej pory:

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

więc potrzebujesz tylko czcionek ttf i eot. Niektóre narzędzia dostępne online mogą dokonać konwersji.

Ale jeśli chcesz dołączyć czcionkę w niestandardowym formacie (mapy bitowe itp.), Nie mogę ci pomóc.

BiAiB
źródło
1
Przykład narzędzia online: kirsle.net/wizards/ttf2eot.cgi Przykład narzędzia offline: code.google.com/p/ttf2eot/wiki/Demo - powinno być również możliwe użycie czcionek WOFF .
Wilf
11

Przekonałem się, że najłatwiejszym sposobem posiadania niestandardowych czcionek na stronie jest użycie sIFR

Obejmuje to użycie obiektu Flash zawierającego czcionkę, ale ładnie obniża się do standardowego tekstu / czcionki, jeśli Flash nie jest zainstalowany.

Styl jest ustawiony w CSS, a JavaScript konfiguruje zamiennik Flash dla tekstu.

Edycja: (Nadal zalecam używanie obrazów niestandardowych czcionek, ponieważ sIFR wydłuża czas projektu i może wymagać konserwacji).

Matt
źródło
24
Co za okropny pomysł! Mam flash w przeglądarce, ale także flashblock. Na tej stronie moja przeglądarka wyświetla okropnie zniszczoną stronę. Flash powinien pozostać czymś, czego używasz do dużych animacji lub filmów. Zbyt dużo flasha jest niesamowicie frapujące i wizualne, mój mój ...
e-satis
2
@ e-satis: Jak to możliwe? Osobiście nigdy nie zauważam różnicy między stroną używającą sIFR a stroną, która tego nie robi, poza subtelnymi różnicami w renderowaniu tekstu. Myślę, że to świetny pomysł, szczerze mówiąc, chociaż @font-facejest znacznie lepszy, jeśli jest wspierany.
Sasha Chedygov
„Edycja: (nadal zalecam używanie obrazów niestandardowych czcionek, ponieważ sIFR wydłuża czas projektu i może wymagać konserwacji).” bardzo dobrze powiedziane. sIFR to naprawdę fajna technika, ale wydaje się, że wymaga wiele, aby uzyskać DOKŁADNY wygląd, jaki chcesz. Jeśli masz czas na naukę i opanowanie tej techniki, bardzo ją polecam. Ale jeśli szukasz szybkiej i łatwej techniki wymiany czcionek, użyłbym zastąpienia obrazu lub nawet właściwości css @ font-face
Derek Adair
10

Typeface.js i Cufon to dwie inne interesujące opcje. Są to składniki JavaScript, które renderują specjalne dane czcionek w formacie JSON (które można konwertować z formatów TrueType lub OpenType na ich stronach internetowych) za pomocą nowego elementu <canvas> we wszystkich nowszych przeglądarkach oprócz Internet Explorera i VML w Internet Explorerze.

Główny problem z obydwoma (jak na razie) polega na tym, że zaznaczanie tekstu nie działa lub przynajmniej działa dość niezręcznie.

Mimo to jest bardzo miły dla nagłówków. Treść ... Nie wiem.

I jest zaskakująco szybki.

Tomasz
źródło
Inną ciekawą opcją jest typekit.com. Podobna koncepcja.
Zack,
8

Lub możesz spróbować sIFR . Wiem, że używa Flasha, ale tylko jeśli jest dostępny. Jeśli Flash nie jest dostępny, wyświetla oryginalny tekst w oryginalnej czcionce (CSS).

Kacper
źródło
4

Technika zalecana do tego przez W3C nazywa się „osadzaniem” i jest dobrze opisana w trzech artykułach tutaj: Osadzanie czcionek . W moich ograniczonych eksperymentach odkryłem, że ten proces jest podatny na błędy i odniosłem ograniczony sukces, sprawiając, że działał w środowisku wielu przeglądarek.

Steve Moyer
źródło
4

Safari i Internet Explorer obsługują zasadę CSS @ font-face, jednak obsługują dwa różne typy czcionek osadzonych. Firefox zamierza wkrótce obsługiwać ten sam typ co Apple. SVG może osadzać czcionki, ale nie jest jeszcze tak szeroko obsługiwane (bez wtyczki).

Myślę, że najbardziej przenośnym rozwiązaniem, jakie widziałem, jest użycie funkcji JavaScript w celu zastąpienia nagłówków itp. Obrazem generowanym i buforowanym na serwerze z wybraną czcionką - w ten sposób po prostu aktualizujesz tekst i nie musisz w Photoshopie.

zobier
źródło
Nie trzeba tego robić w JavaScript. Wiem, że wiele osób lubi obecnie używać JavaScript do wielu rzeczy, ale tutaj standardowa technika CSS może być bardziej odpowiednia. Zobacz sitepoint.com/article/header-images-css-xhtml
hangy
Przepraszam, jeśli jest zamieszanie, technika nie odnosi się do metody zastępowania obrazu, która, jak mówisz, może być CSS. Chodzi o generowanie w locie grafiki przedstawiającej dany ciąg w określonej czcionce / stylu, na serwerze - eliminując potrzebę ręcznego tworzenia.
zobier
4

Jeśli korzystasz z ASP.NET, generowanie czcionek opartych na obrazach jest naprawdę łatwe bez konieczności instalowania czcionek na serwerze za pomocą:

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

a następnie rysowanie tą czcionką na Graphics.

mattlant
źródło
1
cóż, tak ... I użytkownik może zapomnieć o kopiowaniu i wklejaniu. A także powiększanie w starych przeglądarkach. Nie mówię nawet o problemach z przepustowością!
e-satis,
2
Tak, ok, a pytanie określało, że będzie go używać do tekstu treści? Nie, nie, to było ogólne pytanie i to była ogólna odpowiedź. Małe fragmenty tekstu, nagłówków itp. Nie zajmują dużo przepustowości. Sheesh, weź się w garść!
mattlant
3

Wygląda na to, że działa tylko w Internet Explorerze, ale szybkie wyszukiwanie w Google „html embed fonts” daje http://www.spoono.com/html/tutorials/tutorial.php?id=19

Jeśli chcesz pozostać niezależny od platformy (i powinieneś!), Musisz użyć obrazów lub użyć zwykłej czcionki.

James Muscat
źródło
3

Zrobiłem trochę badań i wykopałem Dynamiczne Zastępowanie Tekstów (opublikowane 15.06.2004).

Ta technika wykorzystuje obrazy, ale wydaje się, że jest „bez użycia rąk”. Piszesz swój tekst i pozwalasz kilku automatycznym skryptom na automatyczne wyszukiwanie i zastępowanie na stronie dla ciebie w locie.

Ma pewne ograniczenia, ale prawdopodobnie jest to jeden z łatwiejszych wyborów (i więcej kompatybilności z przeglądarką) niż cała reszta, którą widziałem.

Kent Fredric
źródło
3

Możliwe jest również użycie czcionek WOFF - przykład tutaj

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

Wystarczy, że podasz link do takiej czcionki, a będziesz gotowy

<!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
źródło
Dobra prosta alternatywa. I na pewno masz prawa do korzystania z niego. Zobacz developers.google.com/fonts/docs/getting_started
Tim Erickson
2

Typeface.js JavaScript Way:

Dzięki typeface.js możesz osadzać niestandardowe czcionki na swoich stronach internetowych, dzięki czemu nie musisz renderować tekstu na obrazy

Zamiast tworzyć obrazy lub używać Flasha tylko po to, aby wyświetlać tekst graficzny witryny w żądanej czcionce, możesz użyć czcionek typeface.js i pisać zwykłym HTML i CSS, tak jakby użytkownicy mieli lokalną czcionkę.

http://typeface.neocracy.org/

bakkal
źródło
2

Jeśli masz plik swojej czcionki, musisz dodać więcej formatów tej czcionki dla innych przeglądarek.

W tym celu używam generatora czcionek, takiego jak Fontsquirrel, który zapewnia wszystkie formaty czcionek i jego @ font-face CSS, wystarczy tylko przeciągnąć i upuścić w pliku CSS.

saadeez
źródło