I imported a font in my CSS file with font-face and used it in my navigation menu.
The problem is that the letters are cropped at the bottom and it kinda ruins the font.
See for yourself: dev.windbournecitizen.com/frontpage
It should look like this (with the changed text of course)
The font looks normal when you zoom in (with CTRL+Scroll) but not when you are not zommed in.
Is there any way to fix this?
The problem is encountered on Chrome 35 and Firefox 30 running on Windows 7
I managed to fix it.
By adding a stroke to the text it is possible to make the letters a bit bigger and the bottom of each letters is showing (almost) correctly. There are no more gaps.
I used this code to fix it:
-webkit-text-stroke-width: 0.5px;
-webkit-text-stroke-color: #fe9f00;
It can also be (kinda) fixed using text-shadow. It can be used as an alternative for browser who do not support -webkit-text-stroke
Related
Recently I have been playing around with the anchor tags' css of the page http://nate.fm/articles/ If you assign border around the link Light or Pro-Life vs Pro-Birth and change their font-weight to more than 500 then suddenly the vertical alignment changes from middle to top. Below I have added images showing this:
Font Weight 700:
Font Weight 500:
More to the surprise, this bug disappears for any other font family than Crimson Text. I tried to replicate the bug on local but failed.
Could anyone shed some light over this bug?
Since you mentioned it only happens with Crimson Text, it's probably just the way that font renders when bold. A similar question was asked here: Bold text line-height is higher than normal text line-height
I played around with disabling all the other styles on the page, to see if maybe something was overriding it, but couldn't find any culprits.
A possible work around might just be adding some padding-top.
I'm doing a website, and I'm having some trouble with icon alignment. I have researched everywhere for a solution, and one has not been forthcoming.
Essentially, every time I use an icon and make it smaller than the main text (say, 14px), the icon is forced down by a couple of pixels, and if I keep it the same size, it isn't forced down, but instead extends downwards. This can be corrected with position: relative; top: [pixels]px;, but that feels dirty. I have tried vertical align baseline and middle, and I've tried some other things too.
Here's an example with the icon made smaller than the text:
And here is an example with the icon the same size as the text.
The problem is minor, but the icon should be aligned alongside the text. It would seem a lot of people have this problem, but no solution has worked for me.
What is the solution? Should I consider images instead of icon fonts? Or SVG, perhaps? I suffered the same problem when I attempted to use SVG icons instead.
Previously, I blamed the font. Now, with further work, it appears the font is partially to blame - odd sizes of font throw things off and require tweaks to get elements to line up. So, there's always the option of tweaking the font itself.
If the font still isn't working, or if you can't edit the font, a <span> with position: relative;top: -1px (or any other px/em/rem value, until it looks right) does the trick. But this isn't very cross-browser friendly - in Firefox, this got things looking right, and the same in IE and Edge. But in Chrome, everything was off by 0.5-1px.
Bizarrely, the CSS reset doesn't seem to fix that.
In Google Chrome(34.0.1847.131), possibly other browsers too, we're having an odd rendering issue with a web font using MyFonts.
As shown in the screenshots below there is a pixel at the top of the text which is loading the default/previous colour.
When hovered the top pixel line is white (the normal state colour), when inactive the top pixel line is the default text (non-anchor) colour.
This happens on all parts of the site where using the font and only occurs when using the webfont.
I've tried adjusting text rendering modes and line heights, neither fixed the problem.
The font-size is set to 100% (on all elements) and this inherits 16px from the body element, interestingly changing this to 18px resolves the rendering problem.
Have tried with other standard fonts, not with another webfont yet. The font files, I believe, are loaded directly not remotely.
SOLUTION
Changed the anchor from display: inline; to display: inline-block; as the anchor wasn't fitting the text correctly.
Thanks
It's hard to say without looking at an actual example, but I think you might be experiencing this problem. The font metrics allow the font to run outside its container, and a bug in Chrome prevents these parts from recieving the hover color.
Try setting a background color on the element to see if there are any pixels actually running out of the element. To fix it, you'd need to make the element really wrap the text (by giving it a top padding, for example.)
See this link:
http://lsp2.tpdserver2.co.uk/test.htm
Displays fine in IE/Chrome but in Firefox (6.0.1) there is a 1px border around the blue header.
If I add a background color to the #header-content, the 1px white border dissapears. This seems crazy.
I cannot work out what is going on with this and the related page I am trying to build depends on not having a background colour for the 2nd fixed container.
Here is an image of the problem I see:
Link to Image
It is layout rendering bug in Firefox. This bug was already reported and as I know it is fixed in next release. Only solution I know is to use opacity:0.9999999. It would render correctly as opacity:1, but fix this annoying bug.
Try #header { opacity:0.9999999; }
Bugzilla : Bug 677095
EDIT: Firefox 8 is not affected with this bug and setting opacity to 0.9999999 will result in weird border around the element, so I prefer not to use it anymore
Browsers add different defaults if you don't "reset" the CSS, that may be what is going on here.
If the z-index value of your #header-content is not greater than 10, then the bug is fixed. If it's 11 or greater then I can see the mysterious gap too.
Really weird.
I cannot reproduce in FF 6.0.1; however, you can probably work around this with
background-color: transparent;
on the #header-content, or white if you don't want it being see through.
This should still give the fix you mentioned while remaining a blank div as required.
Update:
Ok thanks for the screenshot, still cannot reproduce, this time with ff 6.0.2 - I had a look around after noticing I can reproduce a similar issue on different zoom levels.
Blog post explaining the zoom border bug, which includes this test page. I am not sure if this is involved, seems similar but not the same thing, zoom bug will take off a slice of the whole page including the border of #header-content.
As for your comments around transparent, you can use it and still supply a background image, does this not work for you?
I have a weird problem on a CSS menu. There's a difference in padding applied by both
Firefox & IE9 vs Chrome & Opera browsers. The space left after the last menu item at the end of the menu is different on both the browsers.
Please see the chrome.jpg and firefox.jpg inside zip file to see what I mean.
I have also attached the source html file.
here is the zip file -
https://www.sugarsync.com/pf/D6612639_7394829_952554
Chrome:
Firefox:
This is not padding but likely a difference in how the fonts are rendered in different browsers. Yeah that is pretty much impossible to solve unless you make the menu items fixed width. :)
The firefox version looks bolder (see it?!)... These are brainbreaking problems not fun to deal with but quite easy to explain.
IE9/Firefox use a different technique to render text than Chrome/Opera do.
IE9/Firefox use DirectWrite, and so the text comes out ever so slightly wider, adding up to a few pixels difference over all the menu items.
Read more here: http://www.basschouten.com/blog1.php/font-rendering-gdi-versus-directwrite
And read this, particularly the "Hinting and spacing differences" section: http://blog.mozilla.com/nattokirai/2011/08/11/directwrite-text-rendering-in-firefox-6/
Short of setting a fixed width on each menu item (don't), you can't fix it. However, you don't need to fix it: a few pixels difference between browsers does not matter. Remember, the users of your site are only looking at it using one browser.