Acasă
» WEB
»
WebFonter: Previzualizați fonturile FontShop pe orice site web - Ce funcționează acum
WebFonter: Previzualizați fonturile FontShop pe orice site web - Ce funcționează acum
WebFonter a fost un instrument de browser pentru a testa fonturile FontShop direct pe un site web înainte de a cumpăra un font. Acesta le permitea designerilor să modifice titlurile și corpul textului în loc să judece un font dintr-un specimen static. Fluxul de lucru inițial este acum istoric: magazinul online FontShop s-a închis în 2023, iar fosta adresă WebFonter redirecționează către o pagină de informații FontShop în loc de un instrument de instalare. Încă puteți previzualiza fonturile prin MyFonts și experimenta cu tipografia site-ului dvs. în instrumentele de dezvoltare ale browserului.
Poți instala în continuare WebFonter?
Nu vă bazați pe vechile instrucțiuni de instalare WebFonter. Conform întrebărilor frecvente oficiale Monotype privind închiderea platformei , platforma comercială FontShop.com a fost retrasă pe 15 decembrie 2023. Adresa web WebFonter originală duce acum la pagina de informații FontShop, care îi îndrumă pe clienți către MyFonts. O extensie sau un bookmarklet WebFonter acceptat în prezent nu a putut fi verificat. Prin urmare, vechile instrucțiuni pentru extensia Chrome și bookmarklet ar trebui tratate ca o înregistrare a modului în care funcționa produsul, nu ca un ghid de instalare funcțional.
Ce a făcut inițial WebFonter
Principalul avantaj al instrumentului era vizualizarea unui font în context. În loc să deschidă un specimen separat de font, un designer putea vizualiza o pagină reală și să-i modifice tipografia, păstrând în același timp aspectul vizibil.
Deschideți un site web. Instrumentul original a fost oferit ca extensie Chrome și ca bookmarklet pentru alte browsere. A fost descris ca fiind utilizabil pe site-uri live și găzduite local, cu condiția ca serviciul său de fonturi să fie accesibil.
Alegeți o familie de fonturi. Controlul Schimbare familie a oferit răsfoire și căutare de fonturi în catalogul FontShop. Alegerea unei familii a actualizat previzualizarea paginii.
Atribuiți și ajustați stiluri. Interfața originală începea cu titluri și text, putea adăuga și alte ținte și oferea un control Tweak pentru dimensiune, înălțimea rândurilor și spațiere.
Un selector de fonturi la nivel de site web ilustrează tipul de comparație în context pentru care a fost conceput WebFonter.
Acestea sunt descrieri istorice ale funcțiilor, nu meniuri actuale confirmate. Unele recenzii vechi menționau și o comandă rapidă Ctrl+H pentru ascunderea controalelor WebFonter. Evitați să urmați acest sfat într-un browser modern: Ctrl+H deschide în mod normal istoricul de navigare dacă pagina sau instrumentul nu îl interceptează.
Cum să testezi fonturile FontShop pe un site web astăzi
Colecția FontFont de la FontShop este acum oferită prin intermediul paginii oficiale de informații FontShop și MyFonts . Următoarea abordare separă descoperirea fonturilor de testarea pe pagină; spre deosebire de vechiul WebFonter, nu este o previzualizare cu un singur clic a FontShop-ului către site-ul web.
Găsiți o familie de fonturi candidată pe MyFonts. În previzualizarea familiei de fonturi sau a stilului individual, introduceți un titlu real, o etichetă de navigare sau un paragraf din proiectul dvs. Conform Întrebărilor Frecvente MyFonts , puteți ajusta dimensiunea și culorile previzualizării și puteți inspecta funcțiile OpenType acceptate. Funcția sa Albume ajută, de asemenea, la colectarea fonturilor pentru a fi luate în considerare alăturat. Verificați mai multe grosimi: o față de afișare atractivă poate să nu fie confortabilă pentru paragrafe lungi.
Comparați un font candidat în diferite stiluri și dimensiuni înainte de a-l integra într-un layout de pagină.
2. Inspectați textul pe care doriți să îl modificați
Deschideți site-ul web în Chrome, faceți clic dreapta pe un titlu sau un paragraf și alegeți Inspectare . Panoul Elemente identifică nodul HTML selectat; panoul Stiluri listează CSS-ul care îl afectează. De asemenea, puteți utiliza selectorul de elemente pentru a selecta text pe pagină. Consultați ghidul Google privind modul Inspectare pentru controalele documentate.
Inspectați un titlu și localizați declarațiile privind familia de fonturi, dimensiunea fontului și înălțimea liniei în panoul Stiluri.
3. Experimentați temporar cu tipografia
În Elemente → Stiluri , editați o declarație existentă de familie de fonturi sau adăugați una la elementul selectat. De exemplu, testați Georgia, serif ca înlocuitor disponibil local pentru o direcție serif, apoi experimentați cu font-size , line-height sau letter-spacing . Modificările sunt de obicei vizibile imediat, dar nu reprezintă o editare permanentă a site-ului publicat. Google explică aceste controale în referința sa DevTools CSS .
Important: Tastarea numelui unui font comercial în CSS nu descarcă sau încarcă automat fontul respectiv. Pentru a vedea fața comercială reală pe pagina dvs., aceasta trebuie să fie deja disponibilă printr-o resursă de fonturi licențiată și încărcată corespunzător sau printr-o instalare locală permisă. În caz contrar, browserul afișează o versiune de rezervă. Nu confundați o previzualizare de rezervă cu fontul pe care intenționați să îl cumpărați.
Comparați același titlu și paragraf în două tratamente tipografice, verificând încadrarea textului și ierarhia.
4. Verificați licența înainte de implementare
O previzualizare gratuită în magazinul online nu este o licență pentru a găzdui fișierele de fonturi pe un site web public. MyFonts explică faptul că fonturile web sunt încorporate prin @font-face și necesită o licență webfont corespunzătoare; domeniile permise și termenii de vizualizare a paginii depind de licența oferită pentru produsul respectiv. Consultați informațiile de licențiere ale familiei și termenii de achiziție înainte de a adăuga fișiere în producție. Nu trebuie presupus că o licență desktop singură acoperă încorporarea web.
Ce trebuie să verificați înainte de a alege un font final
Potrivirea titlului: Titlul se încadrează natural pe lățimea desktopului și a dispozitivelor mobile?
Lizibilitatea textului: Dimensiunile mici, înălțimea rândurilor și densitatea paragrafelor sunt confortabile?
Ponderi și caractere: Sunt disponibile caracterele aldine, italice, semnele de punctuație și glifele lingvistice de care aveți nevoie?
Încărcare reală: Este afișată fața reală sau este doar o soluție de rezervă a browserului?
Dacă o modificare pare să nu aibă efect, verificați dacă o regulă CSS mai specifică are prioritate asupra editării, dacă fontul este încărcat efectiv și dacă ați selectat elementul corect al paginii. Testați mai mult de o lățime a ferestrei de vizualizare. Atractivitatea inițială a WebFonter era contextul imediat; astăzi, combinarea unui specimen MyFonts cu editări temporare DevTools oferă o modalitate practică de a face o alegere tipografică informată fără a pretinde că instrumentul scos din producție este încă disponibil.