W większości przypadków, jak potrzebne jest ustawienie fontu w CSS/JS (np. namalowanie tekstu na Canvas), to w większości opisów spotykam się, żeby ustawić "font-family" na przykład na "Arial, Helvetica, sans-serif". Ja rozumiem, że to znaczy nic innego, jak "Zastosuj font Arial, jeżeli nie ma fontu Arial, to zastosuj Helvetica, a jeżeli nie ma ani Arial ani Helvetica, to zastosuj domyślny font bezszeryfowy".
Od niedawna mam system Linux Ubuntu, w nim nie ma fontów Arial, Helvetica, Courier, Times (przynajmniej nie pokazują się na liście fontów w LibreOffice Writer), te wszystkie zostały stworzone przez Microsoft na potrzeby Windows, są natomiast inne, o podobnym wyglądzie. Jednak ostatnio chciałem poczytać o standardowych nazwach i "uniwersalnych" fontach (w 99% przypadków potrzebne są font bezszeryfowy, font szeryfowy i font o stałej szerokości znaków, a nie jest ważny, jaki konkretny będzie font). Jak już wspomniałem, w Linux nie ma Arial, więc powinien zastosować po prostu font bezszeryfowy.
Opisany przypadek mówi sam za siebie, że nie można przyjmować, że każdy użytkownik ma font "Arial" i jak podam tylko font Arial, a jak nie będzie takiego, to może podstawić się jakiś font szeryfowy, czy inna domyślny. Założyłem, ze po to w CSS są nazwy "serif", "sans-serif" i "monospace".
Wziąłem pierwszy przykład stąd: https://www.w3schools.com/css/css_font.asp , konkretnie https://www.w3schools.com/css/tryit.asp?filename=trycss_font-family
Następnie go trochę przerobiłem na to:
<!DOCTYPE html>
<html>
<head>
<style>
.serif1 { font-family: "Times New Roman", serif; }
.serif3 { font-family: "Liberation Serif", serif; }
.serif2 { font-family: serif; }
.sansserif1 { font-family: Arial, sans-serif; }
.sansserif3 { font-family: Helvetica, sans-serif; }
.sansserif4 { font-family: Liberation Sans, sans-serif; }
.sansserif2 { font-family: sans-serif; }
.monospace1 { font-family: Courier, monospace; }
.monospace3 { font-family: "Nimbus mono", monospace; }
.monospace2 { font-family: monospace; }
</style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif1">This is a paragraph, shown in the Times New Roman font.</p>
<p class="serif3">This is a paragraph, shown in the Liberation Serif font.</p>
<p class="serif2">This is a paragraph, shown in the serif font.</p>
<br>
<p class="sansserif1">This is a paragraph, shown in the Arial font.</p>
<p class="sansserif3">This is a paragraph, shown in the Helvetica.</p>
<p class="sansserif4">This is a paragraph, shown in the Liberation Sans.</p>
<p class="sansserif2">This is a paragraph, shown in the sans-serif.</p>
<br>
<p class="monospace1">This is a paragraph, shown in the Courier font.</p>
<p class="monospace3">This is a paragraph, shown in the Nimbus mono font.</p>
<p class="monospace2">This is a paragraph, shown in the monospace font.</p>
</body>
</html>
Okazuje się, że system dla Arial podłożył Liberation Sans, a dla Times New Roman podłożył Liberation Serif. Natomiast dla "sans-serif" i "serif" podłożył inne fonty.
Rozumiem, ze podkładanie za "sans-serif" i za "serif" wynika z ustawień domyślnego fontu szeryfowego i bezszeryfowego. Natomiast z czego wynika, co system podłożył za Arial i za Times i dlaczego podłożył inny font niż w przypadku "sans-serif" i "serif"?
Jeżeli robię uniwersalną stronę (czyli użytkownik może mieć Windows, Linux, Macos, Android, trochę tego jest), to jak to najlepiej zrobić? Wymienianie wszystkich fontów, jakie są w poszczególnych systemach wydaje się być bezcelowe, bo po to jest "sans-serif" i "serif".