font v niektorych prehliadacoch sa nezobrazuje spravne

[HanaBene]

[HanaBene]

@filiplikavcan s tymto vieme nieco pocarovat?

[rakyi]

Vieme OS a prehliadač verzie, kde sa to zle zobrazuje?

[HanaBene]

windows 10, chrome 79.0.3945.130

[rakyi]

Neviem to zreprodukovať, nemám Windows po ruke. Ale ak to tak nemá viacero ľudí (má?), je možné, že problém je na strane užívateľa.

[black3r]

v CSS máme:

font-family: Roboto, Arial, sans-serif;
font-weight: 700;

Roboto je štandardný systémový font pre Android, nie je štandardný systémový font pre Windows.

V CSS nemáme url na stiahnutie fontu Roboto.

Pre prehliadač to znamená, skús použiť zo systému font Roboto, ak ho nenájdeš, použi Arial, ak ho nenájdeš, použi systémový štandardný sans-serif font.

Tento problém podľa mňa nastáva v prípadoch, keď používateľ má na svojom počítači doinštalovaný font Roboto, ale nie v bold verzii, prehliadač v tom prípade asi nájde font Roboto, pokúsi sa ho použiť, ale nenájde hrúbku 700 (bold) tak fallbackne na nejaký tenší variant, namiesto fallbacknutiu na ďalší font (Arial) v hrúbke 700. U mňa na WIndows nenastáva, použije sa Arial (chrome dev-tools vedia po nájdení daného elementu v záložke "computed" zobraziť ktorý font sa používa).

Ak chceme jednotný vzhľad na všetkých zariadeniach, môžme napr. pridať CSS s url na stiahnutie fontu Roboto (vo všetkých používaných hrúbkach). Na to sa dá použiť Google Fonts, alebo si daný font stiahnuť k sebe a pridať ho do assetov.

[rakyi]

Dobrá úvaha. Roboto sa ale importuje v src/all.scss, tak nerozumiem, prečo nie je na stránke.

[black3r]

ok, do zdrojakov som nepozeral to je pravda.. vyzera to tak, ze aj v skompilovanych CSS-kach z tohto repa (v dist/) sa ten import nachadza, na http://navody-frontend.staging.slovensko.digital/ (co je priamo build tohto repa) ten import funguje a Roboto sa mi stiahne a pouzije..,

na navody.digital nie je priamo CSS z tohto repa ale pravdepodobne spakovane este s nejakymi dalsimi CSS a ten import sa asi niekde pri buildovani toho finalneho CSS-ka strati..