Utwórz pakiet czcionek internetowych
Wybierz czcionki TTF, OTF, WOFF lub WOFF2, aby utworzyć pliki WOFF2, CSS i podgląd HTML. Przed dodaniem czcionek do strony sprawdź tekst przykładowy oraz nazwę, grubość, styl i sposób wyświetlania podczas wczytywania w CSS, a następnie zapisz pakiet jako ZIP. Zestaw znaków nie jest ograniczany.
Co możesz zrobić
Przygotuj pliki na potrzeby internetu
Utwórz WOFF2, CSS i podgląd HTML z plików TTF, OTF, WOFF lub WOFF2. Możesz wybrać wiele czcionek naraz.
Sprawdź glify i ustawienia CSS
Sprawdź wygląd przekonwertowanych czcionek. W razie potrzeby zmień nazwy, grubości i style używane w internecie oraz sposób wyświetlania podczas wczytywania.
Udostępnij zestaw jako ZIP
Zapisz folder fonts, plik fonts.css i preview.html jako zestaw. Używaj ich z zachowaniem względnego położenia.
Jak używać
Wybierz czcionki razem
Wybierz czcionki, których możesz używać w internecie. Jeśli używasz wielu czcionek, wybierz je razem.
Sprawdź wygląd i ustawienia internetowe
Wpisz tekst do podglądu i sprawdź każdą czcionkę. Aby dostosować jej nazwę, grubość lub inne opcje, otwórz ustawienia CSS tej czcionki.
Utwórz zestaw i zapisz ZIP
Kliknij „Utwórz pakiet czcionek internetowych” i zapisz wygenerowany plik webfont-kit.zip.
Wypakuj i dodaj do strony internetowej
Wypakuj pliki, zachowując położenie folderu fonts, pliku fonts.css i preview.html. Wczytaj CSS na stronie, na której użyjesz czcionek, i użyj określonych nazw czcionek.
Przydatne, gdy
Przygotuj stronę do publikacji
Spakuj czcionki do formatów internetowych i CSS, aby przygotować pliki do integracji.
Przekaż zespołowi produkcyjnemu kompletny zestaw
Spakuj wiele czcionek, na przykład zwykłą i pogrubioną, oraz przekaż je razem z plikiem HTML zawierającym tekst do sprawdzenia.
Jak czcionki współpracują z CSS
WOFF2 to format czcionek do internetu
Przygotuj plik WOFF2 zawierający oryginalne znaki. Zestaw znaków nie jest ograniczany. Rozmiar pliku zależy od czcionki.
Zarejestruj nazwy, grubości i style w CSS
Te ustawienia określają, które żądane style korzystają z tej czcionki w internecie. Nie modyfikują glifów czcionki, aby uzyskać pogrubienie lub kursywę.
Rozróżniaj tę samą nazwę według grubości i stylu
Style zwykły i pogrubiony mogą używać tej samej nazwy, ale kombinacja nazwy, grubości i stylu nie może się powtarzać.
Wybierz sposób wyświetlania podczas wczytywania
Domyślnie najpierw wyświetlana jest czcionka zastępcza, która zmienia się po przygotowaniu wybranej czcionki. W razie potrzeby możesz zmienić sposób oczekiwania i przełączania w ustawieniach CSS.
Zachowaj względne położenie plików
Plik fonts.css odwołuje się do plików takich jak fonts/font-1.woff2. Jeśli przeniesiesz folder lub plik CSS, odpowiednio dostosuj ścieżki odwołań.
Często zadawane pytania
Gdzie umieścić wygenerowane pliki?
Wypakuj plik ZIP i umieść folder fonts, plik fonts.css oraz preview.html, zachowując ich względne położenie. Wczytaj fonts.css na swojej stronie i w CSS użyj określonej nazwy czcionki.
Czym to się różni od samej konwersji formatu?
Ten ekran tworzy pakiet WOFF2 z CSS i podglądem HTML. Jeśli chcesz tylko zmienić format czcionki, użyj konwertera formatów czcionek.
Czy mogę zachować tylko używane przeze mnie znaki?
Ten ekran nie ogranicza zestawu znaków. Przygotowuje czcionki zachowujące oryginalne znaki.
Czy zmiana grubości pogrubia znaki?
Ustawienie określa wartość grubości używaną w CSS. Nie modyfikuje glifów w pliku czcionki. Aby używać pogrubienia lub kursywy, dostarcz plik zawierający te glify.
Czy mogę używać wielu plików o tej samej nazwie czcionki?
Możesz zarejestrować pliki o różnych grubościach lub stylach. Jeśli powtórzy się ta sama kombinacja nazwy, grubości i stylu, sprawdź odpowiednie ustawienia.
Co się stanie po ponownym wybraniu czcionek?
Bieżący zestaw czcionek i wygenerowany ZIP zostaną usunięte, a nowy wybrany zestaw wczytany. Wybierz ponownie również pliki, których chcesz nadal używać wraz z nowymi.
Co zrobić, jeśli nie wszystkie przykładowe znaki są wyświetlane?
Znaki, których nie ma w czcionce, mogą być wyświetlane przy użyciu innej czcionki. Sprawdź obsługiwane znaki i ich wygląd w miejscu, w którym użyjesz czcionki.
Co zrobić, jeśli nie można wczytać czcionki?
Wybierz ponownie czcionki w obsługiwanym formacie. Jeśli nie można przekonwertować lub wczytać któregoś pliku w zestawie, częściowo udany zestaw nie zostanie zapisany.
Dane wejściowe i wyniki
- Dane wejściowe
- TTF, OTF, WOFF i WOFF2. Możesz wybrać wiele plików naraz.
- Warunki
- Sprawdź warunki używania czcionek wejściowych, w tym osadzania ich w internecie.
- Ustawienia
- Nazwy, grubości, style i sposób wyświetlania podczas wczytywania używane w CSS.
- Wynik
- webfont-kit.zip. Zawiera WOFF2, fonts.css i preview.html.