Saturday, 15 June 2013

css - Bottom of custom font cut off in Opera and webkit -


I am using custom font in a page that I am developing, Droid Sans, and some font sizes In, below is cut, but only in opera and webkit browsers.

It's easy to reproduce on Google's own webfonts page, in which Drodd is looking for Sons and showing the entire alphabet at 18px:

This is especially obvious that the following code For g .

Is there a CSS move / can I use to increase the height of the line / show the whole character or am I really just a certain size font?

Row-height and padding do not change anything for example and 20px font-size works fine and I am currently using Windows 7.

Edit: By the way, I am aware here but the size of the font is changing as the accepted answer and the rest of the answer is not applicable for me Not much use.

Edit 2: At least now shows the problem (under the left hand side slide show, Il Serka viagy ).

Edit 3: The problem seems limited to Windows, although I'm not sure

Edit 4: I Added a screenshot from Google Webfonts that this problem is not specific to the site that I develop.

chrome 16, google webfonts

< Div class = "post-text" itemprop = "text">

Although this is not the solution I am searching for, I have found the possible solution that can work for others:

In my original style sheet I have the following fonts:

  @ font-face {font-family: 'DroidSans'; Src: url ('droid-sans / DroidSans-webfont.eot'); Source: Local ('a ?? º'), url ('droid-sans / DroidSans-webfont.eot? #iefix') format ('embedded-opentype'), url ('droid-sans / DroidSans-webfont.woff Format '(' woff '), url (' droid-sans / DroidSans-webfont.ttf ') format (' truetype '), url (' droid-sans / DroidSans-webfont.svg # DroidSans ') format (' svg '); Font weight: normal; font style: normal;}   

This webkit is causing browsers to use the woff file / format.

Change the order of font specifications and remove the hash after the svg specification - (Why is it anyway?), WebKit causes browser to use the svg file / format:

  @ font-face {font-family: ' DroidSans'; Src: url ('droid-sans / DroidSans-webfont.eot'); Source: local ('a ?? º'), url ('droid-sans / DroidSans-webfont.eot? #foreix') format ('Embedded-opentype'), url ('droid-sans / DroidSans-webfont.svg' format ('SVG'), url ('droid-sans / DroidSans-webfont.woff') format ('woff'), Url ('droid-sans / DroidSans-webfont.ttf') format ('truetype'); Font weight: normal; Font style: normal; }   

This solves the problem, all the characters are displayed properly.

However, at least in Windows 7 64 bit, the svg font is not as fast as the woff font, so it is very blurry I am not using this solution and hope for better one.

No comments:

Post a Comment