Jak dodać niestandardową czcionkę do strony internetowej?

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

Technicznie, czcionki są hostowane w Google i łączy je w nagłówku HTML. Następnie możesz używać ich swobodnie w CSS z @font-face (przeczytaj o tym ).

Na przykład:

W sekcji :

 <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ść wiarygodne (nawet Smashing Magazine używa go jako tytułu artykułu.). Nie ma jednak tak wielu czcionek dostępne do tej pory w katalogu czcionek Google .

The way To go is using the @ font-face CSS declaration which allows authors to specific online fonts to display text on their web pages. Pozwalając autorom na dostarczanie własnych czcionek, @font-face eliminuje potrzebę polegania na ograniczonej liczbie czcionek zainstalowanych przez użytkowników na swoich komputerach.

Spójrz na poniższą tabelę:

Jak widać, istnieje kilka formatów, o których musisz wiedzieć głównie ze względu na kompatybilność między przeglądarkami. Na scenariusz w urządzeniach mobilnych nie różni się zbytnio.

Rozwiązania:

1 - Pełna kompatybilność przeglądarki

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

Rzeczy sąprzesuwa się mocno w kierunku WOFF, więc prawdopodobnie można uciec z:

@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

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

Referencje i dalsze informacje:

To głównie to, co musisz wiedzieć o implementacji tej funkcji. Jeśli chcesz dowiedzieć się więcej na ten temat, zachęcam do zapoznania się z poniższymi zasobami. Większość tego, co tu umieściłem, pochodzi z następującego

• używanie font Face (bardzo zalecane)
• Bulletproof @font-face syntax
• Czy Mogę używać czcionek internetowych @ font-face ?
• Jak archiwum Cross-Browser @ font-face support
• @font-face w CSS Mozilla Developer Network

Jeśli przez niestandardową czcionkę masz na myśli niestandardową czcionkę w standardowym formacie, oto jak to robię 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 będziesz potrzebował zarówno czcionek ttf, jak i EOT. Niektóre narzędzia dostępne online mogą dokonać konwersji.

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

Odkryłem, że najprostszym sposobem na posiadanie niestandardowych czcionek na stronie internetowej jest użycie sIFR

Wymaga użycia obiektu Flash, który zawiera czcionkę, ale ładnie rozkłada się do standardowego tekstu / czcionki, Jeśli Flash nie jest zainstalowany.

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

Edit: (nadal zalecam używanie obrazów dla niestandardowych czcionek, ponieważ sIFR dodaje czas do projektu i może wymagać konserwacja).

Artykuł Font-face W IE: Tworzenie czcionek internetowych mówi, że działa ze wszystkimi trzema głównymi przeglądarkami.

Oto próbka, którą mam działającą: http://brendanjerwin.com/test_font.html

Więcej dyskusji jest w osadzanie czcionek.

Krój pisma.js i Cufon to dwie inne ciekawe opcje. Są to Komponenty JavaScript, które renderują specjalne dane czcionek w formacie JSON (które można przekonwertować z formatów TrueType lub OpenType na ich stronach internetowych) za pomocą nowego elementu we wszystkich nowszych przeglądarkach z wyjątkiem Internet Explorera i za pomocą VML w Internet Explorerze.

Główny problem z obydwoma (na razie) polega na tym, że zaznaczanie tekstu nie działa lub przynajmniej działa tylko całkiem niezręcznie.

Mimo to, jest to bardzo miłe dla nagłówków. Tekst... Nie wiem.

I jest zaskakująco szybki.

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

Czy istnieje sposób na dodanie niestandardowej czcionki na stronie internetowej bez użycia ... Flash ?

Jasne, użyj Silverlight .

Technika, którą zaleca W3C, nazywa się "osadzanie" i jest dobrze opisana przez trzy artykuły tutaj: osadzanie czcionek. W moich ograniczonych eksperymentach odkryłem, że proces ten jest podatny na błędy i odniosłem ograniczony sukces, dzięki czemu działa w środowisku wielu przeglądarek.

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

Myślę, że najbardziej przenośnym rozwiązaniem, jakie widziałem, jest użycie funkcji JavaScript do zastąpienia nagłówków itp. z obrazem wygenerowanym i buforowanym na serwerze z wybraną czcionką - w ten sposób po prostu zaktualizujesz tekst i nie trzeba się rozpisywać w Photoshopie.

Jeśli używasz ASP.NET, bardzo łatwo jest generować czcionki oparte na obrazach bez konieczności instalowania (jak dodawanie do zainstalowanej bazy czcionek) 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.

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ć agnostykiem (i powinieneś!) będziesz musiał użyć obrazów lub po prostu użyć standardowej czcionki.

Trochę poszperałem i wykopałem dynamiczne zastępowanie tekstu (Data publikacji: 2004-06-15)

Ta technika wykorzystuje obrazy, ale wydaje się być "wolna od rąk". Piszesz swój tekst i pozwalasz kilku automatycznym skryptom na automatyczne znajdowanie i zastępowanie na stronie w locie.

Ma pewne ograniczenia, ale jest to prawdopodobnie jeden z łatwiejszych wyborów (i bardziej kompatybilny z przeglądarką) niż wszystkie inne, które widziałem.

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

Po prostu podaj 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>

Krój pisma.JS JavaScript Way:

Z krojem pisma.js możesz osadzić niestandardowe czcionek na swoich stronach internetowych, dzięki czemu nie trzeba renderować tekst do obrazów

Zamiast tworzyć obrazy lub używać flash tylko po to, aby pokazać grafikę Twojej strony tekst w odpowiedniej czcionce, możesz użyć krój pisma.js i pisać w zwykłym HTML i CSS, tak jakby odwiedzający mieli czcionka zainstalowana lokalnie.

Http://typeface.neocracy.org/

Monotype niedawno wydało wiele swoich czcionek wraz z nowym systemem do ich używania na stronach internetowych: http://www.webfonts.fonts.com/

Zobacz artykuł 50 przydatne narzędzia do projektowania pięknej typografii internetowej dla metod alternatywnych.

Używałem tylko Cufon . Uważam, że jest niezawodny i bardzo łatwy w użyciu, więc utknąłem z nim.

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

Do tego celu używam font generator jak Fontsquirrel zapewnia on wszystkie formaty czcionek i jego @ font-face CSS, wystarczy tylko przeciągnąć i upuścić go do pliku CSS.

Obawiam się, że grafika jest jedyną opcją w tym przypadku.