Strona główna
» SIEĆ
»
WebFonter: Podgląd czcionek FontShop na dowolnej stronie internetowej — co działa teraz
WebFonter: Podgląd czcionek FontShop na dowolnej stronie internetowej — co działa teraz
WebFonter był narzędziem przeglądarkowym, umożliwiającym testowanie krojów pisma FontShop bezpośrednio na stronie internetowej przed zakupem czcionki. Pozwalało projektantom zmieniać nagłówki i tekst na miejscu, zamiast oceniać czcionkę na podstawie statycznego wzorca. Ten pierwotny sposób działania jest już historią: sklep internetowy FontShop został zamknięty w 2023 roku, a poprzedni adres WebFonter przekierowuje do strony informacyjnej FontShop, a nie do narzędzia instalacyjnego. Nadal można podglądać kroje pisma w MyFonts i eksperymentować z typografią witryny w narzędziach programistycznych w przeglądarce.
Czy nadal można zainstalować WebFonter?
Nie należy polegać na starych instrukcjach instalacji WebFonter. Zgodnie z oficjalnym FAQ Monotype dotyczącym zamknięcia platformy , platforma handlowa FontShop.com została wycofana 15 grudnia 2023 r . Pierwotny adres internetowy WebFonter prowadzi teraz do strony informacyjnej FontShop, która kieruje klientów do MyFonts. Nie udało się zweryfikować aktualnie obsługiwanego rozszerzenia lub zakładki WebFonter. Instrukcje dotyczące starych rozszerzeń i zakładek Chrome należy zatem traktować jako zapis działania produktu, a nie jako działający przewodnik po instalacji.
Co WebFonter pierwotnie zrobił
Główną zaletą tego narzędzia było wyświetlanie kroju pisma w kontekście. Zamiast otwierać osobną próbkę czcionki, projektant mógł zobaczyć prawdziwą stronę i zmienić jej typografię, zachowując jednocześnie widoczny układ.
Otwórz stronę internetową. Oryginalne narzędzie było oferowane jako rozszerzenie do Chrome i jako zakładka do innych przeglądarek. Opisywano je jako użyteczne na stronach działających i hostowanych lokalnie, pod warunkiem dostępności usługi obsługi czcionek.
Wybierz rodzinę czcionek. Kontrolka Zmień rodzinę umożliwiała przeglądanie i wyszukiwanie czcionek w katalogu FontShop. Wybór rodziny aktualizował podgląd strony.
Przypisuj i dostosowuj style. Oryginalny interfejs zaczynał od tekstu nagłówkowego i głównego, umożliwiał dodawanie innych elementów docelowych i oferował możliwość dostosowywania rozmiaru, wysokości wiersza i odstępów.
Selektor czcionek na poziomie witryny internetowej ilustruje rodzaj porównywania kontekstowego, do którego zaprojektowano WebFonter.
To historyczne opisy funkcji, a nie potwierdzone obecne menu. Niektóre starsze recenzje wspominały również o skrócie Ctrl+H do ukrywania kontrolek WebFonter. Unikaj stosowania się do tej rady w nowoczesnych przeglądarkach: Ctrl+H zazwyczaj otwiera historię przeglądania, jeśli strona lub narzędzie jej nie przechwytuje.
Jak testować czcionki FontShop na stronie internetowej już dziś
Kolekcja FontFont firmy FontShop jest teraz dostępna na oficjalnej stronie informacyjnej FontShop oraz w serwisie MyFonts . Poniższe podejście oddziela odkrywanie czcionek od testowania na stronie; w przeciwieństwie do starego WebFontera, nie jest to podgląd przejścia z FontShop na stronę internetową za pomocą jednego kliknięcia.
1. Podgląd czcionki przy użyciu własnych słów
Znajdź rodzinę kandydatów w MyFonts. W podglądzie rodziny czcionek lub indywidualnego stylu wprowadź rzeczywisty nagłówek, etykietę nawigacyjną lub akapit ze swojego projektu. Zgodnie z FAQ MyFonts , możesz dostosować rozmiar i kolory podglądu oraz sprawdzić obsługiwane funkcje OpenType. Funkcja albumów pomaga również zebrać czcionki do porównania. Sprawdź kilka grubości: atrakcyjny wygląd może nie być wygodny w przypadku długich akapitów.
Porównaj dany krój pisma w różnych stylach i rozmiarach, zanim zatwierdzisz go na stronie.
2. Sprawdź tekst, który chcesz zmienić
Otwórz swoją witrynę w Chrome, kliknij prawym przyciskiem myszy nagłówek lub akapit i wybierz opcję „Inspekcja” . Panel „Elementy” identyfikuje wybrany węzeł HTML; panel „Style” wyświetla kod CSS, który go dotyczy. Możesz również użyć selektora elementów, aby zaznaczyć tekst na stronie. Informacje na temat udokumentowanych kontrolek znajdziesz w przewodniku Google po trybie inspekcji .
Przejrzyj nagłówek i znajdź deklaracje dotyczące czcionki, rozmiaru czcionki i wysokości wiersza w panelu Style.
3. Eksperymentuj tymczasowo z typografią
W sekcji Elementy → Style edytuj istniejącą deklarację rodziny czcionek lub dodaj ją do wybranego elementu. Na przykład, przetestuj Georgia, serif jako lokalnie dostępny zamiennik kierunku szeryfowego, a następnie poeksperymentuj z rozmiarem czcionki , wysokością linii lub odstępami między literami . Zmiany są zazwyczaj widoczne od razu, ale nie są one trwałą zmianą w opublikowanej witrynie. Google wyjaśnia te kontrolki w dokumentacji CSS DevTools .
Ważne: Wpisanie nazwy komercyjnej czcionki w CSS nie powoduje automatycznego pobrania ani załadowania tej czcionki. Aby zobaczyć jej rzeczywisty wygląd na stronie, musi być ona dostępna za pośrednictwem odpowiednio licencjonowanego i załadowanego zasobu czcionek lub dozwolonej instalacji lokalnej. W przeciwnym razie przeglądarka wyświetli podgląd zastępczy. Nie myl podglądu zastępczego z czcionką, którą zamierzasz kupić.
Porównaj ten sam nagłówek i akapit w dwóch wariantach typograficznych, sprawdzając zawijanie tekstu i hierarchię.
4. Sprawdź licencję przed wdrożeniem
Bezpłatny podgląd w sklepie nie jest licencją na hostowanie plików czcionek na publicznej stronie internetowej. MyFonts wyjaśnia, że czcionki webowe są osadzane za pośrednictwem @font-face i wymagają odpowiedniej licencji webfont; dozwolone domeny i warunki dotyczące liczby odsłon zależą od licencji oferowanej dla danego produktu. Przed dodaniem plików do produkcji zapoznaj się z informacjami o licencjach danej rodziny czcionek oraz warunkami zakupu. Sama licencja desktopowa nie powinna być uznawana za obejmującą osadzanie w witrynach internetowych.
Co sprawdzić przed wyborem ostatecznej czcionki
Dopasowanie nagłówka: Czy tytuł naturalnie dopasowuje się do szerokości ekranu komputera stacjonarnego i urządzenia mobilnego?
Czytelność tekstu: Czy małe rozmiary, wysokość wiersza i gęstość akapitów są komfortowe?
Grubości i znaki: Czy pogrubienie, kursywa, znaki interpunkcyjne i glify językowe, których potrzebujesz, są dostępne?
Rzeczywiste ładowanie: Czy wyświetlana jest rzeczywista twarz, czy to tylko opcja przeglądarki?
Licencjonowanie: Czy zakupiony plan obejmuje korzystanie z Twojej witryny?
Jeśli zmiana wydaje się nieskuteczna, sprawdź, czy bardziej konkretna reguła CSS nie zastępuje Twojej edycji, czy czcionka jest faktycznie załadowana i czy wybrałeś właściwy element strony. Przetestuj więcej niż jedną szerokość pola widzenia. Początkowo WebFonter przyciągał do siebie kontekstem; dziś połączenie próbki MyFonts z tymczasowymi edycjami DevTools oferuje praktyczny sposób na dokonanie świadomego wyboru typografii bez konieczności twierdzenia, że wycofane narzędzie jest nadal dostępne.