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.)
Related
Odd problem which makes me suspect I'm missing something simple. Any ideas on the following:
I have a H1 tag with a sans-serif font (loaded from Google fonts) and if I give it a background-color you can see the text isn't aligning to the left of the containing tag:
If I add a serif font you can see taht it does behave how I need it to, the text is up against the left hand side. When I turn it on/off in dev tools it is simply adding/removing the serifs:
There are no styles applied to the H1 other than a font-weight. Tried resetting my margins but to no avail.
I can set a nagtive margin but that won't work for all resolutions.
It's in the font glyph itself, so no way to circumvent it easily via CSS unless you edit the font itself. See the following screenshots.
Serif:
Sans-serif:
Tool for reference: http://nodebox.github.io/opentype.js/glyph-inspector.html
The kerning will be off. It occupies a set width, irrespective of whether the letter is at the edge. Free fonts are known for it. The best way to combat this is to use a different font.
Hello I have found a strange issue on a website I am working on.
I can't figure out why this is happening, but some text with a color assigned via css looks darker then it should be. I am am using the gantry framework for wordpress, but I cannot find any kind of css filter applied that would be causing this and there is no layers on top of the text.
What is weird is if I add position:relative and z-index:1 to the text's container it becomes lighter(closer to the correct color). I made a video of me toggling the z-index on and off with the chrome inspector. Can see it here; http://screencast.com/t/RsuK0h4C7o. I have set a block above the text to the same color so you can see the different text colors changing.
Another weird thing I noticed is that the text stops doing this at larger font sizes.
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
I'm having some trouble making a site, identical to viewing it in the browser, for print. It looks good, the only thing that got me stuck is that it refuses to display backgrounds. The images are fine though, it's just backgrounds. I haven't tried setting an image as a background, but that shouldn't be necessary anyways, right?
I'm applying the background to a DIV element, with hex colors, if that matters.
Is there any way around this? I searched for it but i didn't find anyone was having the same problem.
Thanks!
By default many browsers does not print background images and colours. You need to enable that in the print options. Chrome does not have that option but to make a WebKit browsers (Safari, Google Chrome) print the background image or colour you should add the following CSS style to the element:
-webkit-print-color-adjust: exact;
Background images being printed or not is not something you can force via CSS: it's a browser's setting and most (if not all) browsers default to the 'not'.
You could try using two separate elements, for example a paragraph and an image, and then setting the z-index of the image lower than the z-index of the paragraph and then absolutely positioning the image behind your content. But I would recommend not having the background print. Otherwise you're messing with users' expectations and people will probably get annoyed.
CSS: box-shadow: inset 0 0 0 1000px gold;
Works for all browsers and on table cells and rows.
I'm having a problem aligning an image to the top the text in an <h2> element because the space between the top of the text and the top of the elements box is different across browsers (so far it's been different between IE7, Safari 4, and FF3 - haven't tested anything else). Particularly noticeable because I'm using a large font (48px). Is there any way to reset this so they're all the same? It isn't margin/padding.
This seems like it'd be an easy fix if I just take the text out of the header element and put it in a div, but it is in fact a header element and I'd like to still use it if at all possible.
No, that's not possible.
You can specify the margin, padding and line-height to get them as close as possible, but beyond that there is nothing you can do. Text will always be rendered differently in different browsers and on different systems.
How text is rendered depends on a lot of factors besides just how the browser positions it, like the fonts installed on the system, the font size the user selected and font smoothing settings. You can never expect text to be rendered at the same pixel position on all systems.
Have a look into reset stylesheets, which are designed to reduce inconsistencies across different browsers thus saving a lot of work in the long term. Also see:
Reset Reloaded
YUI Reset CSS
Blueprint CSS
A reset stylesheet would be the obvious first step (see, for example, Eric Meyer's 'Reset Reloaded': http://meyerweb.com/eric/thoughts/2007/05/01/reset-reloaded/ ).
This essentially overrides browser rendering defaults back to 0, so all margins and padding is at 0px, all fonts are at 1em, line-heights at 1em etc.
If you want to omit the use of a reset-stylesheet, you can just use the following:
h1,h2 /* etc... */
{padding: 0;
margin: 0;
}