See attached screenshot... This text rendering is coming out very unclearly on IE9. You may wish to zoom in to full size.
The font is from Typekit and, as per the client's request (and visual necessity), needs the drop shadow underneath it. This is done with CSS3. Is this a known issue, or are there any workarounds to it?
Is this to do with ClearType etc? If so, which settings need to be changed to fix this?
Thanks for your advice! Here's what the CSS on the text looks like:
font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: 700;
color: rgba(255, 255, 255, 0.5);
text-shadow: 0px 5px 10px #000;
display: inline;
margin-right: 30px;
font-size: 30px;
cursor: pointer;
I'm not 100% sure what your issue here is, but I do know that text-shadow isn't supported by default IE9. The text will appear perfectly white in this fiddle using your example code in IE9. Unless you're using some shiv to get text-shadow to work, you can use a DirectX filter - DXImageTransform.Microsoft.Shadow - to apply the shadow in IE9:
filter: progid:DXImageTransform.Microsoft.Shadow(color=#000000,direction=45);
Do note, however, that this will not be as dark as the text-shadow you have currently applied.
If this issue is to do with the font not displaying in IE9 (it looks like Arial to me), then please see #font-face works in IE8 but not IE9
Related
Codepen Link: https://codepen.io/calebzahnd/pen/OWxxLw
h1 {
max-width: 800px;
font-family: sans-serif;
font-size: 90px;
font-weight: 900;
text-shadow: 0 0 50px #000;
}
Screenshot:
I've found what I can only imagine to be a bug in Chrome Browsers when displaying on a Retina screen. There is a strange clipping on the text shadow, and the text shadow itself is pushed way below the actual text. When adjusting the font-size, the clipping will randomly change to only clip certain characters. If you adjust the blue value of the text-shadow, certain values will snap the shadow back to where it should be located, but without any sort of rhyme or reason. I've checked and this displays fine on Safari and Firefox. Can someone explain what is going on here?
I can perfectly see the text shadowing in Chrome and Safari browser with my retina display screen.
Try updating your browsers and/or clean your cache.
h1 {
max-width: 800px;
font-family: sans-serif;
font-size: 90px;
font-weight: 900;
text-shadow: 0 0 50px #000;
margin-left:25px;
}
<h1>This is what you want everyone to see</h1>
The problem is that there is this large shadow, and the text is right against the pixel edge. Some devices/browsers won't render past the pixel edge of a window or a div. My suggestion is a 25px margin to the left of your text. Perhaps even 25 all around.
I'm looking to recreate the "Sign in to iCloud" text on http://beta.icloud.com
I have already copied all the styles attributed to that line of text, and everything is in order apart from the thickness of the text. I see Apple has applied the font-weight 300 to the style, which should and does make it thinner, however when I copy and paste the exact same code my browser renders it thicker on my own webpage. My question is, how is Apple making the text thin like that or how can I achieve the same effect?
The code from them that I have used so far is:
position: absolute;
color: #FFF;
left: 0px;
right: 0px;
height: 40px;
top: 131px;
font-size: 35px;
font-family: "Helvetica Neue",sans-serif;
font-weight: 300;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
Any ideas on what could be causing it to render at normal thickness? I have no conflicting styles and this is the only code relating to my line of text
Using the CSS given I can get the same style as on iCloud website. (http://jsfiddle.net/LeBen/WznR5/)
After font-weight, the property that can slightly change the appearance of text on webkit browsers is -webkit-font-smoothing: antialiased;. If you don't use it, the browser fallback to the default smoothing mode (subpixel-antialiased) and result in a text looking bolder.
Are you sure you've included it in your tests and your browser apply it?
Try Avenir Ultra Light it's a thin font that looks similar to it
http://www.typophile.com/node/42590
I have been struggling to get consistent and nice looking fonts across all browsers with the QuickSand Google font. Chrome and IE show very jagged and pixelated edges, especially at smaller font sizes. Zooming the browser will often make the artifacts disappear.
Here is a screenshot comparison of the issue with Firefox, Chrome, & Internet Explorer:
https://dl.dropboxusercontent.com/u/29865983/imagehost/jsfiddle/QuickSandFont.png
Here is a jsfiddle reproducing the issue for experimentation:
http://jsfiddle.net/vXd2F/
#main-nav ul li a, #main-nav ul li a:link, #main-nav ul li a:active {
color: white;
display: inline-block;
padding: 19px 10px;
font: 400 12px/14px 'Quicksand', Helvetica, Arial, sans-serif;
text-transform: uppercase;}
The problem was due to Google Fonts not implementing all of the font file types. The solution was to use font squirrel web font generator to generate the missing file types and host them myself.
You can't do too much with the font rendering on the browsers. You can try with font-face if that can make it better, but otherwise it can't be changed.
For webkit (Chrome,Safari) you can add:
-webkit-text-stroke: 1px black;
In order to mask the problem a little but the text will become ticker.
I have the following style:
background-color: #C9C5BC;
color: #FFF;
font-size: 10px;
font-weight: bold;
padding: 0 3px;
text-transform: uppercase;
cursor:pointer
the HTML element is
<span class="name-indicator">NameIndicator1</span>
IT looks like this is Firefox (desired)
and in Chrome it looks like this (wrong)
The problem is that in chrome there is no white space between the span elements and it is caused by the fact that in FF the height is 13px and in Chrome it's 15px, when setting the font size in chrome to 7px I achieved the right effect.
How can I fix this to be the same on both browsers? I want to keep the font-size to be 10px
EDIT:
I've created a fiddle please take a look at both FF and Chrome
I noticed that the codes in the stackoverflow answers look similar to your provided image (2nd one). If you put this CSS line-height: 21px on the container .wmd-preview p, then a separation appears between the codes. So your problem could be solved by adding line-height to the container of those span.
To have better chance of achieving same results across many browsers use css-reset at the beginning of your page. This little piece of css will make sure that all elements have same default values in all browsers. You can get one from here.
i have a background image on a webpage and i am placing an image in my body to line up over the image:
here is my css:
Background:
body {
font: 12px tahoma, Arial, Helvetica, sans-serif;
line-height: 1.5em;
margin: 0px;
padding: 0px;
color: #241a10;
background:#c9e4ec url(/Content/images/myImage.gif);
}
Image:
#leftSideContainer {
position:relative;
margin-top:-47px;
width:147px;
height:93px;
background:url(/Content/Images/image2.gif);
}
In IE7 and Chrome, it looks perfect and lines up exact:
But in IE8 and Firefox, the image shows a little lower down compared to the background image:
If it was just an old version of IE that was broken i wouldn't care but in this case firefox is broken as well.
i tried playing with the:
margin-top: -47px;
but if i move it higher to get it to line up in firefox, it them obviously looks misaligned for the other browsers.
any suggestions for what might be causing this discrepancy.?
CSS reset is your friend
http://meyerweb.com/eric/tools/css/reset/
The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.