Web fon line height probleem?

Door Joey Drieling op 06-06-2013 16:09 gewijzigd op 06-06-2013 16:14

4.100 views

Goedendag,

Ik gebruik een web font alleen per browser ligt hij anders in de line height.

bijvoorbeeld bij IE lijnt hij zo uit in een span element.


___________
|  tekst  |
|         |
|_________|

bij FF en Chrome meer zo.


___________
|         |
|         |
|__tekst__|

bij opera en andere webkit browsers klopt wel aardig als zo.


___________
|         |
|  tekst  |
|_________|

Ik heb al zitten spelen met de line height, maar dan schuif je alleen per browser het probleem op.

PS. De span is in werkelijkheid 40px hoog gelijk aan de font ook 40px, met 5px padding rondom.

Eddy E

11-06-2013 20:56

Joey Drieling op 10/06/2013 00:14:03

Goedendag,

Ik heb ff mijn oude situatie online gezet http://rakoda.uphero.com/

M.V.G. Joey

In Opera zijn beide woorden even groot en staan ze even hoog. Linkertekst is korrelig. Blijft bij inzoomen zo. Selecteren = gelijke hoogte.
In Opera zijn beide woorden even groot en staan ze even hoog. Tekst is korrelig. Na inzoomen glad. Selecteren = gelijke hoogte.
In Firefox zijn beide woorden even groot en staan ze even hoog. Tekst is glad (altijd). Selecteren = gelijke hoogte
In Internet Explorer 10 zijn beide woorden even groot en staan ze even hoog. Tekst is glad. Bij selecteren blijken ze echter totaal op verschillende hoogten te staan.

Mijn conclusies: Internet Explorer doet raar... Maar wellicht krijgt die andere CSS van jou?

Ger van Steenderen

11-06-2013 21:19

@Frank
Dat zegt helemaal niets!
Want jij vertaald 'ik gebruik een web font' naar 'ik geen web font'.
Daarnaast ga je als iemand kritiek heeft op jouw JS oplossing ineens jquery erbij betrekken.
Get real!, met jquery gaat dit veel makkelijker en met minder code.

En dan hebben ook nog [url=<link href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz" rel="stylesheet" type="text/css" />dit[/url]

Eddy E

11-06-2013 21:37

Waarom gebruik je die dan niet? Ik heb daar nog nooit zulke problemen mee gehad.

Maar goed, ik probeer ook geen 'plaatje' te maken van tekst. Tekst is gewoon tekst. En een kop heeft een ander lettertype maar geen 2 naast elkaar.

Ger van Steenderen

11-06-2013 21:58 gewijzigd op 11-06-2013 21:59

Ik denk dat we het daar allemaal over eens zijn.
Maar zoals ik al eerder aangaf, lijkt mij dit meer een puur css verhaal, en ga je dit niet oplossen met wazige javascript en/of jquery

Reageren

Inloggen om te reageren