I have a simple <a class="button"> element, and I noticed on Firefox, the text wasn't as vertically aligned as on Chrome.
Here is some sample code:
Here is my CSS:
body {
font-family: sans-serif;
}
.button {
font-size: 3em;
display: inline-block;
padding: 0.6em 1em;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #333;
background-color: #7d8cdd;
}
.button > span {
background-color: #8cd5ed;
}
<span>CLICK ME</span>
Now what I'm not sure, is why Firefox is rendering the text so poorly. That is, it is putting a lot of space beneath the text, but not a lot above it.
Here are some screenshots:
Firefox:
Chrome:
Searching around, I wasn't able to find much reading material on the subject.
Anyone have any ideas why Firefox renders text with space at the bottom, but not at the top? Thanks.
NOTE: I am running Mac OS X Yosemite (10.10.5).
Figured it out. When putting font-family: sans-serif;, Chrome will choose Helvetica Neue, whereas Firefox will choose plain Helvetica. That difference of space is in the font files themselves.
Explicitly declaring
body {
font-family: "Helvetica Neue", sans-serif;
}
instead "fixes" the issue on Firefox, aka, makes it so FF and Chrome will use Helvetica Neue as the render font (assuming it is available).
Related
From the images below, you can see that the font rendering used by safari adds some white lines to some characters. This occurs in Safari for both iOS and Mac. While in the example below it is not as noticeable, in practice it can be quite distracting.
I noticed this happened after I added font-weight: 400; to my text. The reason I added it was to fix another issue by Safari which rendered by font with large kerning between letters see this Stack Overlow question.
This is the entire CSS for the text:
h2 {
font-family: 'My-Font', sans-serif;
font-size: 3.5em;
line-height: 1.2em;
margin-bottom: 0.5em;
text-align: center;
}
Is this another bug in Safari and is there a workaround if so? Thanks.
Some folks recommend
text-rendering: optimizeLegibility;
Other
transform: perspective(1px);
Hope it helps.
I set the font-size style of a <textarea> to 120%. But the text turns out to be much bigger under Firefox compared to that under Chrome.
After checking the style using developer's tool I found the following preset style under Chrome:
input, textarea, keygen, select, button {
margin: 0em;
font: normal normal normal 13.3333330154419px/normal Arial;
color: initial;
letter-spacing: normal;
word-spacing: normal;
text-transform: none;
text-indent: 0px;
text-shadow: none;
display: inline-block;
text-align: start;
}
It seems that under Chrome the 120% is computed against 13.333px, while Firefox will computed it against the real default font-size 16px and finally make the text appears much bigger.
I do use css reset to override the default style but Chrome insists computing 120% against the 13.333px preset font size.
Please anyone tell me how can I make Firefox and Chrome render percent font size in textarea the same?
I have a problem with fonts, because they don't render same on Windows and on OS X. On Windows, characters are vertically aligned in line, but on OS X, the characters are positioned much closer to top of the line.
I highlighted the text in screenshots so you can see the difference.
I am using font Gotham. Any ideas? Do I have to use browser-specific hacks or is it a font issue?
Link to JSFiddle: http://jsfiddle.net/wewo/myh4amud/
body {
font-family: 'Gotham', Arial, sans-serif;
background-color: #282828;
font-size: 14px;
font-weight: normal;
}
div {
color: white;
font-size: 5em;
padding-top: 15px;
padding-bottom: 6px;
line-height: 1em;
}
<div>3</div>
Thank you!
The problem is in process converting or generating webfont font.
I use tool Font Squirrel for convert correct, with this option EXPERT... :
If don't work with Google Font, download him and send for convert.
Problem with Win Ascent and HHead Ascent fields in font. Windows use Win,
mac - HHead. Use FontForge for edit this.
I hope someone may help me figure this out,
the problem is with a Google WebFont being displayed poorly in Google Chrome (ironic isn't it). Here is a picture of the problem:
And here the link to the WIP Site: http://klok-bremen.de/noire/index.html
I underlined all the problematic letters with red. The letters with problems are those with ascenders. You can see how the O, Q, G, S and C are not positioned how they should be, but perhaps one or two pixels too high.
Now this problem only occurs in Google Chrome. However the Chrome on my Macbook is displaying the Font right. It is just my Windows PC which displays the Font on Chrome like this.
If this is a problem with my computer, it isn't that important, however it would still be nice to know what's causing it.
CSS in question:
.menu-list li {
color: #fff;
font-family: 'Pathway Gothic One', sans-serif;
font-weight: normal;
font-size: 1em;
text-decoration: none;
text-shadow: 1px 1px 1px #000;
text-transform: uppercase;
}
Chrome on Windows always had antialiasing issues.
Try font-size: 1.01em instead of 1em or play with the pixel values until you find something robust.
Example with 1.01em font-size:
This problem exists ONLY on Mac Safari.
Other browsers / other OS works properly.
The problem:
Observe the font weight of the top navigation here: http://www.octa.com (WordPress)
Then observe the font weight of the top navigation here: http://www.octa.com/products (Magento)
Note that while they are served by different code (WP vs Magento), the css is nearly identical between the two pages.
Here's the relevant bits of the css:
nav.menu li a {
font-family: 'VegurLight','Myriad Pro',Arial,Helvetica,Sans-Serif;
font-size: 20px;
text-align: left;
}
nav.menu li a, #subnavwrapper nav li a {
color: #FFFFFF;
font-weight: normal;
height: 50px;
line-height: 50px;
padding: 0 46px 0 0;
}
nav li a {
display: block;
line-height: 1em;
text-decoration: none;
}
body {
color: #000000;
font-family: "Lucida Grande","Lucida Sans Unicode",Helvetica,Arial,Verdana,sans- serif;
font-size: 14px;
line-height: 1.55em;
text-align: center;
background: black;
}
Note that the font is imported using #font-face.
I've tried everything - many answers here on SO and other articles. Note that none of the below styles gleaned from other answers / resources corrected the font display.
font-variant:normal;
-webkit-font-smoothing: antialiased;
text-shadow: rgba(0, 0, 0, .01) 0 0 1px;
Try -webkit-font-smoothing: antialiased;
I've found that this simple change made Safari's font-weight property much more reliable.
(I cannot post comments so I can only add my findings to the conversation by posting.)
I have found that text in fixed position elements appears lighter weight than other types of positioning in Safari. Therefore could not be ignored as suggested in other places.
Adding --webkit-font-smoothing: antialiased does solve this , but then it looks lighter than in Firefox. Which can be fixed with -moz-osx-font-smoothing: grayscale
fiddle here to show the problem - Safari only
With the comments / prodding from #JukkaK.Korpela, I discovered a few things:
First, the root of the problem is this:
-webkit-backface-visibility: hidden;
Which was added to the code to solve an animation problem per this answer: iPhone WebKit CSS animations cause flicker
Don't know how to solve the font and solve the flicker, but I can at least choose which one to solve now.
Second, as an avid Firefox/Firebug user, I had tried using Firebug Lite in Safari, as well as another extension for Safari, and they did not work. So, for all of you out there who may be trying to troubleshoot Safari-only issues, here's a big tip:
Safari's "Develop" tool. Didn't know about it at all until I did some searching today, but it's a menu item in the toolbar. If you don't see it, then go to Preferences->Advanced, and check the "Show Develop Menu in Toolbar"
With that tool, I was able to troubleshoot and solve this quickly.