Reguła CSS @font-palette-values umożliwia dostosowanie domyślnej palety barw zdefiniowanej przez twórcę fontu do specyficznych potrzeb projektu strony internetowej.
Wartości i składnia
Reguła @font-palette-values składa się z identyfikatora, który zostanie następnie użyty we własności font-palette i który musi zaczynać się od dwóch znaków łącznika, oraz bloku deklaracji deskryptorów:
@font-palette-values --identyfikator {
deskryptor: wartość;
}
.moje-kolory {
font-palette: --identyfikator;
}Dostępne są następujące deskryptory:
- font-family
- Określa rodziny fontów, do których ma zastosowanie dana paleta kolorów. Obowiązują takie same zasady, jak we własności
font-family. - base-palette
- Określa nazwę lub indeks palety bazowej zdefiniowanej przez projektanta fontu. Możliwe wartości:
light,darklub liczba całkowita. - override-colors
- Lista rozdzielanych przecinkami par
indeks-koloru kolor. Indeks to numer koloru w palecie, która jest modyfikowana, a kolor to nowy kolor, który ma zostać zastosowany zamiast niego. Indeks jest liczbą całkowitą z przedziału od 0 do nieskończoności, a kolorem może być dowolny typ wartości koloru CSS.
Przykład
Poniższy przykład przedstawia modyfikację domyślnej palety kolorów fontu Honk z serwisu Google Fonts.
@font-palette-values --moja-paleta {
font-family: Honk;
override-colors:
0 red,
1 green,
2 blue;
}
.moje-kolory {
font-family: Honk;
font-palette: --moja-paleta;
}Domyślnie tekst wyrenderowany przy użyciu fontu Honk wygląda tak:
Po zastosowaniu powyższych modyfikacji, tekst zmieni się następująco:
