Web fon line height probleem?

Dan zul je per browser een andere line-height op moeten geven. Dat kun je doen op de volgende manier. In de head:

<script type="text/javascript">
var browser = navigator.userAgent;
var htmlTag = document.documentElement;

if (browser.indexOf("Android") != -1)  //first Android, then the rest
        {htmlTag.className += " android not-ie"};
if (browser.indexOf("Mobile") != -1)
        {htmlTag.className += " mobile"};
if (browser.indexOf("MSIE 7") != -1)
        {htmlTag.className += " ie7 lte7 lte8 ie9 lte9 lte10 ie"};
if (browser.indexOf("MSIE 8") != -1)
        {htmlTag.className += " ie8 lte8 ie9 lte9 lte10 ie"};
if (browser.indexOf("MSIE 9") != -1)
        {htmlTag.className += " ie9 lte9 lte10 ie"};
if (browser.indexOf("MSIE 10") != -1)
        {htmlTag.className += " ie10 lte10 ie"};
if (browser.indexOf("Firefox") != -1)
        {htmlTag.className += " firefox not-ie"};
if (browser.indexOf("Chrome") != -1)
        {htmlTag.className += " chrome webkit not-ie"};  // first Chrome, then Safari
if (browser.indexOf("Safari") != -1)
        {htmlTag.className += " safari webkit not-ie"};
if (browser.indexOf("Opera") != -1)
        {htmlTag.className += " opera not-ie"};
</script> 

En vervolgens maak je aparte klassen in je stijlblad:

.ie span      {line-height: ..px;}
.firefox span {line-height: ..px;}

etc.

@Frank: dit lijken mij operaties die niet aan te bevelen zijn. Wellicht is er een veel betere en minder drastiche oplossing. Misschien handig als de topic starter een URL heeft waarop een voorbeeld te zien is.

Zo als ozzie al zei ben ik niet van plan zulke oplossingen te gaan gebruiken. Ik heb een andere font genomen die er erg op lijkt, maar die zig wel normaal gedraagt. Nu klopt het zo als ik het wil. Aleen in FF en wat mobiele webkit browsers wilt hij een pixel hoger of lager staan, ten opzichte van de andere tekst met een andere font. Maar dat neem ik maar voor lief.

Kun je misschien een voorbeeldje geven van je probleem? Ik ben wel benieuwd of ik (of iemand anders) het kan oplossen

Het probleem in eerste instantie kag aan de font zelf de glyphs liggen in de font afwijkend. Vandaar dat andere font dat oploste die zig wel normaal gedraagt.

Ik heb het niet online staan, staan thuis op de pc.

De afwijking in FF of enkele mobiele browsers licht aan feit dat browsers de line height kan variëren tussen de 110% en de 120%.

Ik heb daarom ook geprobeerd de line height te restten maar dat helpt niet.

Joey Drieling op 06/06/2013 22:36:49

Zo als ozzie al zei ben ik niet van plan zulke oplossingen te gaan gebruiken. Ik heb een andere font genomen die er erg op lijkt, maar die zig wel normaal gedraagt.

OK, maar waarom stel je de vraag hier dan? Er is nog nauwelijks gelegenheid geweest om met een oplossing te komen. En hoe hadden we het moeten oplossen als Joey perse die font had willen houden, Ozzie?

Frank Conijn op 07/06/2013 01:55:51

En hoe hadden we het moeten oplossen als Joey perse die font had willen houden, Ozzie?

Frank, wat wil je horen? Jij komt met een oplossing waar ik in 1e instantie niet voor zou kiezen. Vandaar ook dat ik gevraagd heb om een online voorbeeld. Wellicht had ik, of iemand anders, dan een betere, minder ingrijpende, oplossing kunnen bedenken. Een heel javascript om een line-height bij te stellen is niet een oplossing waarvoor ik zou kiezen, en zeker niet zonder mogelijke alternatieven te onderzoeken.

Ik vond al snel na plaatsen van mijn vraag elders op het net, een andere discussie over mijn vraag zie http://stackoverflow.com/questions/6375822/font-face-and-line-height-issue

Van daar dat ik een font heb genomen die wel naar verwachting reageert.

De eerste font is 40px/110% dat werkt naar behoren.
De tweede font is 37px/130% hij is kleiner anders is hij groter dan de vorige. De line Heights is 130% om hem gelijk uitgelijnd te krijgen, alleen in FF + Safari wijkt hij 1px in hoogte af.

wat ik ook probeer in Opera, Chrome zelfs IE10 klopt hij alleen FF + Safari niet.

Joey, heb je al een Reset CSS geprobeerd, bijvoorbeeld die van Eric Meyer? Die zet namelijk alle wit op 0 (daar kan die 1px vandaan komen) en gebruikt line-height: 1 zonder px, % of pt.

@ward heb ik ook al geprobeerd maar niks helpt, ook de font size in andere eenheden helpt niet.

De twee verschillende fonts zo als ik wil gaat niet. De een is 40px de ander 37px dan zijn ze net zo hoog. nu is 37px een oneven waarde, dus heeft geen middelpunt gelijk aan de 40px ernaast.

De meeste browsers behandelen de oneven waarde toch als even en plaats hem gelijk met de 40px, allee FF en Safari plaatsen hem niet op het middelpunt eigenlijk best logies.

Maar er 36px of 38px van maken is ook geen optie want dan is hij in de andere browsers 1px te lang of te kort.

Mijn besluit is om toch maar een font te gebruiken.