Istnieją 2 metody osadzania czcionki Ubuntu w witrynie - za pomocą katalogu czcionek Google (preferowane) lub @font-face
deklaracji CSS i ręcznej konwersji czcionek.
Korzystanie z Google Webfonts
Możesz teraz używać czcionki Ubuntu jako czcionki internetowej Google. Ułatwi to proces. Większość treści tej części odpowiedzi pochodzi z odpowiedzi Sladena .
Dlaczego używanie interfejsu API czcionek Google jest preferowaną metodą?
Korzystanie z interfejsu API czcionek Google jest doskonałą sugestią, ponieważ umożliwia stronom internetowym automatyczne działanie we wszystkich nowoczesnych przeglądarkach bez martwienia się o szczegóły. Korzystanie z interfejsu API czcionek oznacza, że odwiedzający zawsze będą automatycznie widzieć najnowszą wersję kroju pisma.
Jak mogę korzystać z interfejsu API czcionek Google?
Od 21 grudnia 2010 r. Rodzina czcionek Ubuntu jest teraz włączona i można ją wdrażać z interfejsu API czcionek Google, odwiedź:
Możesz przeczytać post Google Web Font o wiadomościach, a następnie:
- Otwórz katalog czcionek Google: „ Ubuntu - Użyj tej czcionki ”
Zaznacz kombinację wag i stylów spośród zwykłych, kursywy, pogrubionej i pogrubionej kursywy, których potrzebujesz na swojej stronie internetowej.
Jeśli wartość domyślna jest nieprawidłowa, wybierz potrzebną kombinację języka / skryptu : rosyjska witryna internetowa z przykładami w języku angielskim może używać „Cyrylicy, łaciny”.
Dodaj podany <link>
tag pomiędzy <head> ... </head>
na stronie HTML lub w szablonach i dodaj odpowiedni kod CSS pomiędzy <style> ... </style>
tagami na swoim <head>
.
Na przykład, jeśli tworzysz rosyjsko-angielską stronę hybrydową i chcesz użyć czcionki jako domyślnej dla całego tekstu, możesz dodać następujący kod między <head>
tagami:
<link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=cyrillic,latin' rel='stylesheet' type='text/css' />
<style type="text/css" >
body {
font-family : 'Ubuntu', sans-serif;
}
</style>
Uwagi :
„Łacina” to skrypt, w którym napisany jest angielski oraz wiele innych języków europejskich i afrykańskich.
„Podzbiór” optymalizuje pliki czcionek, wysyłając tylko znaki dla niektórych języków, czcionki mają około 44 kB każdy. Liczba 168 kB pokazana w tej chwili dotyczy wszystkich ponad 1200 glifów jako pojedynczego pobrania czcionki internetowej - i większość z nich nie jest potrzebna w przypadku jednej witryny internetowej.
Pliki czcionek Ubuntu są automatycznie konwertowane w odpowiednim formacie dla różnych przeglądarek; w zależności od marki i wersji wymagany format jest WOFF
, EOT
, SVG
lub TTF
. Właściwa kombinacja CSS jest specyficzna dla każdego żądania strony i magicznie rozwiązuje ten trudny problem.
Używanie @ font-face
Możesz osadzić czcionki Ubuntu, konwertując je na czcionki WOFF . Możesz je następnie osadzić za pomocą deklaracji CSS @ font-face. Czcionki (pliki .ttf) można znaleźć w /usr/share/fonts/truetype/ubuntu-font-family
.
Na przykład, aby użyć zwykłej czcionki Ubuntu, przekonwertowanej na plik WOFF, Ubuntu-R.woff, użyj tego kodu CSS:
@font-face
{
font-family : "Ubuntu-R";
src: url('Ubuntu-R.woff');
}
Podobnie dla Ubuntu Bold:
@font-face
{
font-family : "Ubuntu";
src: url('Ubuntu-B.woff');
font-weight : bold;
}
Kursywa Ubuntu:
@font-face
{
font-family : "Ubuntu";
src: url('Ubuntu-I.woff');
font-style : italic;
}
Ubuntu Bold Italic:
@font-face
{
font-family : "Ubuntu";
src: url('Ubuntu-BI.woff');
font-weight : bold;
font-style : italic;
}
Jest to obsługiwane przez wszystkie najnowsze przeglądarki .
Uwagi
Pamiętaj, że niektórzy użytkownicy konfigurują przeglądarki tak, aby używały określonego zestawu czcionek i mogą być zirytowane, jeśli zostaną użyte niestandardowe czcionki. Przeczytaj także licencję czcionek Ubuntu, aby uzyskać dokładne warunki dystrybucji czcionki.