Używać wielu niestandardowych czcionek za pomocą @font-face?

Jestem pewien, że coś mi umyka. Używam pojedynczej czcionki niestandardowej z normalną czcionką twarzy: 

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

Wszystko działa dobrze, gdy go używam, ale jeśli chcę dodać kolejną niestandardową czcionkę, co mam zrobić? Próbowałem oddzielać przecinkiem następną lub dodawać zupełnie inną czcionkę, ale nie mogę uruchomić drugiej czcionki.

Author: BoltClock, 2011-08-11
Source

5 answers

Wystarczy dodać kolejną @font-face regułę: 

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

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

Jeśli twoja druga czcionka nadal nie działa, upewnij się, że poprawnie pisujesz jej nazwę kroju pisma i nazwę pliku, bufory przeglądarki zachowują się, Twój system operacyjny nie bawi się czcionką o tej samej nazwie itp.

 99
Author: BoltClock,
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-05-06 15:07:11

Jeśli masz problem z działającą czcionką, również miałem to w przeszłości i problem, który znalazłem, sprowadzał się do nazwy font-family:. To musiało pasować do nazwy czcionki.

Najprostszym sposobem na znalezienie tego było zainstalowanie czcionki i sprawdzenie, jaka jest wyświetlana nazwa.

Na przykład, używałem Gill Sans w jednym projekcie, ale rzeczywista czcionka nazywała się Gill Sans MT. Rozstaw i kapitalizacja były również ważne, aby uzyskać racja.

Mam nadzieję, że to pomoże.

 7
Author: Adam Stacey,
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
2011-08-10 22:28:01

Zobacz fontsquirrel . Mają generator czcionek internetowych, który również wypluwa odpowiedni arkusz stylów dla Twojej czcionki (poszukaj "@font-face kit"). Ten arkusz stylów może być dołączony do twojego własnego arkusza lub możesz go użyć jako szablonu.

 5
Author: tdammers,
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
2011-08-10 22:15:14

Możesz używać wielu twarzy czcionek dość łatwo. Poniżej znajduje się przykład jak używałem go w przeszłości: 

<!--[if (IE)]><!-->
    <style type="text/css" media="screen">
        @font-face {
            font-family: "Century Schoolbook";
            src: url(/fonts/century-schoolbook.eot);
        }
        @font-face {
            font-family: "Chalkduster";
            src: url(/fonts/chalkduster.eot);
        }
    </style>
<!--<![endif]-->
<!--[if !(IE)]><!-->
    <style type="text/css" media="screen">
        @font-face {
            font-family: "Century Schoolbook";
            src: url(/fonts/century-schoolbook.ttf);
        }
        @font-face {
            font-family: "Chalkduster";
            src: url(/fonts/chalkduster.ttf);
        }
    </style>
<!--<![endif]-->

Warto zauważyć, że czcionki mogą być zabawne w różnych przeglądarkach. Font face we wcześniejszych przeglądarkach działa, ale musisz użyć plików eot zamiast ttf.

Dlatego umieszczam moje czcionki w nagłówku pliku html, ponieważ mogę następnie użyć warunkowych znaczników IE, aby odpowiednio użyć plików eot lub ttf.

Jeśli w tym celu musisz przekonwertować ttf na eot, jest genialna strona, którą możesz zrobić za darmo w Internecie, którą znajdziesz pod adresem http://ttf2eot.sebastiankippe.com/.

Mam nadzieję, że to pomoże.
 3
Author: Adam Stacey,
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
2011-08-10 22:22:24

Używam tej metody w moim pliku css 

@font-face {
  font-family: FontName1;
  src: url("fontname1.eot"); /* IE */
  src: local('FontName1'), url('fontname1.ttf') format('truetype'); /* others */
}
@font-face {
  font-family: FontName2;
  src: url("fontname1.eot"); /* IE */
  src: local('FontName2'), url('fontname2.ttf') format('truetype'); /* others */
}
@font-face {
  font-family: FontName3;
  src: url("fontname1.eot"); /* IE */
  src: local('FontName3'), url('fontname3.ttf') format('truetype'); /* others */
}
 3
Author: 5ulo,
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-05-06 15:07:43