Fontgrootte in diverse browsers
23 mei 2021 - 11:56   
geplaatst door: MacMiep
Ik heb een nieuwe webserver: https://macostutorial.com .

Wat mij is opgevallen bij het testen is dat browser Opera veel grotere letters laat zien dan Safari.
Ik heb een lettergrootte van 1 em. Dat zou 16 pixels moeten zijn :reading:.

Doe ik iets verkeerd of ligt het echt aan Opera?  (nee, de vergroting staat uit)

Screenshot 2021-05-23 at 11.59.12.pngFontgrootte in diverse browsers

Al meer dan 20 jaar beheert Miep de MacMiepMacCursus op macmiep.nl!
Fontgrootte in diverse browsers
23 mei 2021 - 12:52    reactie #1
geplaatst door: nnsa
Een vluchtige test laat zien dat de website prima werkt in mijn browsers. Is het niet zo dat als dit het geval is in Microsoft Edge, Google Chrome, Fire Fox en Safari, het OK is. Opera is een goede browser, maar wordt zeker niet veel gebruikt.

Het kan ook liggen aan het content management systeem (CMS). Maar daar zijn te weinig gegevens van. En de vraag is dan of je daar veel tijd en energie in moet stoppen.
Fontgrootte in diverse browsers
23 mei 2021 - 12:52    reactie #2
geplaatst door: Feek
@MacMiep Jouw veronderstelling is niet helemaal juist. 1em is relatief ten opzichte van de parent tag. Dus als in één van de parents ook al bv 1.1em heeft staan dan kan er iets fout gaan.

Waarschijnlijk ben je in de war met 1rem. De rem wordt gedefinieerd door ofwel de browser instellingen (doorgaans inderdaad 16px) ofwel jouw css definitie in de HTML tag. Maar als je geen definitie van 1rem hebt gegeven en de browserinstelling is 18px dan krijg je inderdaad een groter lettertype.

Dus duik nog maar eens in rem vs em.

Als ik naar je css kijk heb je inderdaad niet in de root HTML tag font-size:16px gedefineerd (Zie hier voor uitleg), dus wordt het door de browserinstellingen bepaald. 

Fontgrootte in diverse browsers
23 mei 2021 - 12:54    reactie #3
geplaatst door: Kapotlood
Heb je het specifiek in CSS aangegeven dat de standaard fontgrootte overal 16px moet zijn? Ik weet dat Firefox dat soort dingen ook wel eens net even anders doet (zelfde met line-height overigens). En heb je een CSS-reset gebruikt?

https://stackoverflow.com/questions/521832/consistent-font-size-across-browsers-web-development
font-size: 70%; // better than px
line-height: 110%; // required to make line heights the same

Of zoiets als hieronder? Het is een wat ouder artikel, maar volgens mij gaat dit nog steeds op: http://www.codecouch.com/2007/04/how-to-get-consistent-font-sizes-across-all-browsers/
Fontgrootte in diverse browsers
23 mei 2021 - 16:44    reactie #4
geplaatst door: MacMiep
Thanx guys, ik heb hier zeker wat aan!
Al meer dan 20 jaar beheert Miep de MacMiepMacCursus op macmiep.nl!
Fontgrootte in diverse browsers
23 mei 2021 - 20:48    reactie #5
geplaatst door: MacMiep
Grappig. Ik voeg dit toe:
body   {

color: #000000;
font-family: "Lucida Grande", Geneva, Arial, Verdana, sans-serif;
background-color: #333333;

>>>>>>font-size:16px;<<<<<<

text-align: left;
text-decoration: none;
margin: 10px;
}

In de CSS en het is al klaar.   :woot: :worship:

Screenshot 2021-05-23 at 20.42.20.pngFontgrootte in diverse browsers


Ik ben ook geen groot code klopster hoor. Als het overal werkt wat ik wil zien dan is het ok. Hoeft niet ingewikkeld maar vooral functioneel.
Al meer dan 20 jaar beheert Miep de MacMiepMacCursus op macmiep.nl!
Fontgrootte in diverse browsers
23 mei 2021 - 22:12    reactie #6
geplaatst door: Kapotlood
Gelukkig makkelijk opgelost dan :)
Fontgrootte in diverse browsers
23 mei 2021 - 22:17    reactie #7
geplaatst door: Feek