Używanie niestandardowych czcionek przy użyciu CSS?

Widziałem kilka nowych stron internetowych, które używają niestandardowych czcionek na swoich stronach (inne niż zwykłe Arial, Tahoma, itp.).

I obsługują sporą ilość przeglądarek.

Jak to się robi? Jednocześnie uniemożliwiając ludziom swobodny dostęp do pobrania czcionki, jeśli to możliwe.

 140
cssfont-face
Author: Boann, 2012-08-27
Source

7 answers

Ogólnie rzecz biorąc, możesz użyć niestandardowej czcionki używając @font-face w CSS. Oto bardzo podstawowy przykład: 

@font-face {
    font-family: 'YourFontName'; /*a name to be used later*/
    src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
}

Następnie, trywialnie, aby użyć czcionki na określonym elemencie: 

.classname {
    font-family: 'YourFontName';
}

(.classname jest Twoim selektorem).

Zauważ, że niektóre formaty czcionek nie działają na wszystkich przeglądarkach; możesz użyć fontsquirrel.com 'S generator, aby uniknąć zbyt dużego wysiłku konwersji.

Możesz znaleźć ładny zestaw darmowych czcionek internetowych dostarczonych przez Google Fonts (posiada również automatycznie generowany CSS @font-face Zasady, więc nie musisz pisać własnych).

Jednocześnie uniemożliwiając ludziom swobodny dostęp do pobrania czcionki, jeśli to możliwe

Nie, Nie jest możliwe stylizowanie tekstu za pomocą niestandardowej czcionki osadzonej za pomocą CSS, jednocześnie uniemożliwiając ludziom jej pobieranie. Musisz użyć obrazów, Flasha lub HTML5 Canvas, z których wszystkie nie są zbyt praktyczne.

Mam nadzieję, że to pomogło!

 300
Author: Chris,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-01-14 11:43:38

Aby upewnić się, że Twoja czcionka jest zgodna z przeglądarką, upewnij się, że używasz tej składni: 

@font-face {
    font-family: 'Comfortaa Regular';
    src: url('Comfortaa.eot');
    src: local('Comfortaa Regular'), 
         local('Comfortaa'), 
         url('Comfortaa.ttf') format('truetype'),
         url('Comfortaa.svg#font') format('svg'); 
}

Wzięte z tutaj .

 24
Author: Serj Sagan,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-06-18 02:44:06

Musisz pobrać plik czcionki i załadować go do CSS.

F. e. używam czcionki Yanone Kaffeesatz w mojej aplikacji internetowej.

Ładuję i używam przez 

@font-face {
    font-family: "Yanone Kaffeesatz";
    src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}

W moim arkuszu stylów.

 22
Author: akluth,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-27 14:33:02

Jeśli nie znajdziesz żadnych czcionek, które lubisz z Google.com/webfonts lub fontsquirrel.com zawsze możesz stworzyć własną czcionkę internetową za pomocą stworzonej przez Ciebie czcionki.

Oto fajny samouczek: Stwórz swój własny zestaw czcionek do twarzy

Chociaż nie jestem pewien, czy uniemożliwić komuś pobranie Twojej czcionki.

Hope this helps,

 4
Author: Eric Robinson,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-27 14:34:04

Istnieje również ciekawe narzędzie o nazwie CUFON . Jest demonstracja jak go używać w tym blog To naprawdę proste i ciekawe. Ponadto nie pozwala ludziom ctrl + c / ctrl + v Wygenerowanej zawartości.

 4
Author: Periback,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-08-27 15:51:41

Pracuję nad Win 8, Użyj tego kodu. Działa dla IE i FF, Opery itp. To, co zrozumiałem , to: czcionka WOFF jest lekka i powszechna w czcionkach Google.

Idź tutaj , Aby przekonwertować wcześniej czcionkę ttf na WOFF.

@font-face
{
    font-family:'Open Sans';
    src:url('OpenSans-Regular.woff');
}
 1
Author: Arnold,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-03-20 08:59:03

Obecnie w sieci stosowane są cztery formaty kontenerów czcionek: EOT, TTF, WOFF,iWOFF2.

Niestety, pomimo szerokiego wyboru, nie istnieje jeden uniwersalny format, który działa we wszystkich starych i nowych przeglądarkach: {]}

  • EOT jest TYLKO IE,
  • TTF ma częściowe wsparcie IE,
  • WOFF cieszy się najszerszym wsparciem, ale nie jest dostępny w niektórych starszych przeglądarkach
  • WOFF obsługa 2.0 to praca w toku dla wielu przeglądarki.

Jeśli chcesz, aby Twoja aplikacja internetowa miała tę samą czcionkę we wszystkich przeglądarkach, możesz podać wszystkie 4 typy czcionek w CSS 

 @font-face {
      font-family: 'besom'; !important
      src: url('fonts/besom/besom.eot');
      src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
           url('fonts/besom/besom.woff2') format('woff2'),
           url('fonts/besom/besom.woff') format('woff'),
           url('fonts/besom/besom.ttf') format('truetype'),
           url('fonts/besom/besom.svg#besom_2regular') format('svg');
      font-weight: normal;
      font-style: normal;
  }
 1
Author: Hitesh Sahu,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-04-12 10:03:51