CSS3 czcionki

Zasady CSS3 @ font-face

Poprzednie wersje CSS3, projektanci stron internetowych musieli używać na komputerze użytkownika jest już zainstalowane czcionki.

Za pomocą CSS3, projektanci stron internetowych mogą korzystać niezależnie od czcionki on / ona lubi.

Po znalezieniu pliku, którego chcesz użyć czcionkę, plik czcionki po prostu być zawarte na stronie internetowej, to zostanie on automatycznie pobrany do potrzeb użytkowników.

Czcionki do wyboru w nowej wersji na CSS3 @ opisem reguły font-face.

Twoje "własne" fonty są zdefiniowane w CSS3 @ font-face reguły.

Pomoc Browser

Wartości podane w tabeli przedstawiają pierwszą przeglądarką obsługującą numer wersji obiektu.

Internet Explorer 9+, Firefox, Chrome, Safari i Opera WOFF wsparcia (Web Open Font Format) czcionki.

Firefox, Chrome, Safari i Opera .ttf wsparcia (czcionki True Type) oraz .OTF (OpenType) czcionka typ czcionki).

Chrome, Safari i Opera również wspierać czcionek SVG / zawalił.

Internet Explorer obsługuje również EOT (wbudowany OpenType) czcionek.

Uwaga: Internet Explorer 8 i wcześniejsze wersje nie obsługują nowej reguły @ font-face.

Trzeba użyć czcionkę

W nowej reguły @ font-face, należy najpierw określić nazwę czcionki (takich jak myFirstFont), a następnie wskazać plik czcionki.

	Wskazówka: URL wykorzystywać małą czcionką, liter w IE będzie powodować nieoczekiwane rezultaty

Aby użyć czcionki dla elementu HTML, odnoszący się do nazwy czcionki (myFirstFont) przez właściwości font-family:

Przykłady

<style>
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}

div
{
font-family:myFirstFont;
}
</style>

Spróbuj »

Użyj pogrubiony tekst

Należy dodać kolejne reguły @ font-face zawierającą pogrubiony tekst:

Przykłady

@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight:bold;
}

Spróbuj »

Plik "Sansation_Bold.ttf" to kolejny plik czcionki, który zawiera czcionkę Sansation pogrubioną.

Korzystanie z tego tekstu przeglądarka czas rodziny czcionek "myFirstFont" powinien być wyświetlany jako pogrubiony.

Więc można mieć wiele z tej samej czcionki reguły @ font-face.

Opis CSS3 czcionki

Poniższa tabela zawiera opis wszystkich czcionek i wnętrze definicji reguły @ font-face: