Moet ik het lettertype Helvetica beschouwen als een web-safe font, dwz is het een betrouwbare bron om in te stellen in mijn CSS die toegankelijk zal zijn op elk apparaat?
Reacties
- Hoe is dit een UX-vraag? Zou het niet ' t moeten zijn op GraphicDesign.StackExchange of iets dergelijks?
Answer
Helvetica is niet alleen niet veilig, maar het is ook een auteursrechtelijk beschermd lettertype , dus je hebt een licentie nodig om het te gebruiken als je het als webfont laadt.
In feite zijn er geen 100% veilige weblettertypen , aangezien dit afhangt op de lettertypen die de gebruiker op zijn / haar apparaat heeft, en verschillende besturingssystemen hebben verschillende lettertypesets. Daarom moet u zoiets als dit doen:
p{font-family:Arial, Helvetica, sans-serif}
Anders wordt uw site weergegeven met het standaardlettertype dat de gebruiker heeft ingesteld, bijvoorbeeld Times New Roman .
Als je op safe wilt spelen, raad ik je deze heel handige bron aan: CSS Font Stack . Daar kunt u “veiliger” lettertypen zien, het percentage van het gebruik door het besturingssysteem en zelfs de code die moet worden gebruikt, inclusief fallback alternatieven
Opmerkingen
- sorry, maar UX gaat niet over willekeur, maar over controle. Misschien vind je het soms leuker, maar het is puur subjectief, zoals je zegt, en zeker niet iets om aan te bevelen
- @Devin Ik ben het ermee eens. Bij het vermelden van het lettertype in Css, moet het worden gewijzigd als p {font-family: Helvetica, Arial, sans-serif}. Het primaire lettertype zou op de eerste plaats moeten komen als belanghebbenden de voorkeur geven aan dit lettertype en vervolgens moeten we systeemlettertypen zoals Arial n sansarif toevoegen.
- Waarom alle opmerkingen over auteursrechten en het laden van weblettertypen? De vraag gaat over webveilige fonts die (per definitie) al aanwezig zijn op het apparaat van de eindgebruiker. De vraag geeft aan dat je geen webfonts wilt laden.
- CSS Font Stack is leuk, maar het toont alleen fonts die zijn geïnstalleerd op desktop Windows en OS X.
- Enig goed gelezen over Helvetica in Windows. Link
Antwoord
Zoals vermeld er bestaat niet zoiets als een veilig weblettertype. Maar er is een manier om ontbrekende lettertypen van uw server te laden door het gebruik van @ font-face . @ font-face werd voor het eerst geïntroduceerd in CSS2, bevat terugvalbestandstypen en wordt breed ondersteund . Dit zou geen 100% oplossing zijn, maar het zou veelbelovender zijn dan afhankelijk van de lettertypeselectie van de machine.
Eerst zou je het bestand op je server plaatsen als een normaal statisch gehost bestand. Het kan zijn dat u de mime-typen van uw webserver moet configureren zodat deze het bestand correct verwerkt en niet probeert om de clienthandleiding het in plaats daarvan te laten downloaden.
Vervolgens zou u code in uw stylesheet implementeren die eruitziet als het volgende. Let op: dit zijn slechts enkele van de mogelijke formaten. U hoeft ze niet allemaal te gebruiken. Maar als u de verwijzing naar het bestand niet verwijdert, voorkomt u onnodige vertraging door de ontbrekende bron.
@font-face { font-family: "MyWebFont"; src: url("webfont.eot"); /* IE9 Compat Modes */ src: url("webfont.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */ url("webfont.woff2") format("woff2"), /* Super Modern Browsers */ url("webfont.woff") format("woff"), /* Pretty Modern Browsers */ url("webfont.ttf") format("truetype"), /* Safari, Android, iOS */ url("webfont.svg#svgFontName") format("svg"); /* Legacy iOS */ }
Daarna zou u het lettertype aan uw element. Als u uw versie van Helvetica wilde gebruiken, gebruik dan zoiets als:
font-family: "MyWebFont", Helvetica, sans-serif;
Als het font-face niet kan worden geladen, zal het proberen om de machine te gebruiken “s Helvetica en als dat niet lukt, zal het proberen sans-serif te laden. Bovendien kunt u uw lettertype en het machinelettertype omwisselen. Maar het bespaart uw bandbreedte niet omdat het uw lettertypen nog steeds laadt zodra het het stylesheet laadt.
Als laatste maar vooral is Helvetica geen gratis lettertype. U moet een licentie kopen voor het gebruik ervan. Linotype zal u de nodige weblettertypen en licenties van hun website verkopen. De prijs is gebaseerd op paginaweergaven. Maar eenmaal gekocht is het volledig legaal om in uw webpagina of webapp in te sluiten.
Antwoord
toegankelijk zijn op elk apparaat
Echt niet zoiets als “beschikbaar op elk apparaat”.
Als u geen ingesloten lettertypen gebruikt, moet u een lettertypestapel gebruiken, zodat u een aantal back-upopties heeft voor het geval de eerste niet beschikbaar is.
Answer
Helvetica maakt geen deel uit van een standaard Windows-lettertypeset, daarom zullen Windows-gebruikers waarschijnlijk een ander secundair lettertype zien. Als u zich daar geen zorgen over maakt, gebruik dan Helvetica.
Opmerkingen
- Het Arial-lettertype is standaard op alle versies van Windows (sinds v3.1) en heeft in wezen dezelfde lay-outkenmerken; het gebruik van Arial als een terugval voor Helvetica zal dus in wezen dezelfde look en feel geven (met de nodige excuses aan die lettertypeliefhebbers die de verschillen kennen en er om geven). Zie en.wikipedia.org/wiki/Arial
- Windows is niet het enige besturingssysteem, niet ' t vergeet iedereen. Anderen hebben misschien geen Arial.
- Arial is bijvoorbeeld niet standaard aanwezig in veel Linux-distributies.