I am trying to get fonts to render equally across browsers in an application where line breaks must be consistent. Content is user-generated.
Bold makes the letters wider. With the default browser font, the line will then break earlier when text is wrapped in a container.
When using web fonts, the line does not lengthen when bold is applied in Chrome, but it does in Explorer. This leads to inconsistent line breaks across browsers.
UPDATE:
Firefox behaves same as explorer (web-font text lengthens when bold applied). Non-web fonts in chrome behave same as in other browsers. Apparently, chrome (version 47) has an abnormality with the rendering of web fonts, since this is the only case that behaves differently. I opened a bug report that links to this question.
Simplified test case
HTML
<h2>will break in chrome and explorer:</h2>
<div>
hover to make the text bold and break the line!
</div>
<h2>will break in explorer only:</h2>
<div class="web-font">
hover to make the text bold and break the line!
</div>
CSS
#font-face { font-family: 'roboto'; src: local('roboto'), url(https://themes.googleusercontent.com/static/fonts/roboto/v9/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff');
}
div{
width:380px;
height:100px;
border:5px solid gray;
font-size:20px;
margin-bottom:10px;
}
.web-font{
font-family: 'roboto';
font-size:18px;
}
div:hover{
font-weight:bold;
}
I tested both .ttf and .woff formats with equal results.
I tried tweaking CSS properties such as letter and word spacing but of course results will vary depending on the text so this is not a viable solution for variable content.
Maybe a work around?
div:hover{
text-shadow:0 0 1px Black;
}
instead of:
div:hover{
font-weight:bold;
}
http://codepen.io/anon/pen/MKOgYw
Related
I am using a custom font for a image slider in SharePoint 2010. For some reason when the size of the font is anything bigger than 12pt, the font is pixelated and is not sharp in IE 8.
CSS:
#font-face {
font-family: 'MyriadPro';
src: url('http://insidedev:1000/fonts/myriadpro.otf'); /* IE9 Compat Modes */
src: url('http://insidedev:1000/fonts/myriadpro.otf?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('http://insidedev:1000/fonts/myriadpro.otf') format('otf'), /* Modern Browsers */
}
#slider div.mc-caption {
font: 13pt bold 'Arial Rounded MT Bold', Verdana, MyriadPro;
color:#FFFFF;
z-index:4;
text-align:left;
background:none;
margin-left: 10px;
}
#slider div.mc-caption a {
color: #354B9A;
font: 13pt bold 'Arial Rounded MT Bold', Verdana, MyriadPro;
}
#slider div.mc-caption a:hover {
color: #E8620E;
font: 13pt bold 'Arial Rounded MT Bold', Verdana, MyriadPro;
}
I was trying to originally use a custom font, MyriadPro but that did not seem to be being used in my image slider. With the above CSS, the caption looks like this:
Any idea what is causing this? How do I fix it, please let me know.
I was able to solve my problem by using ClearType for older version of IE8 that displays the pixelated font.
First, what is ClearType?
Think of those jagged edges you often see in text on a computer
screen, especially any flat-panel. Well, there’s a bit of code in your
operating system that attempts to clean up those edges by using
anti-aliasing at the sub-pixel level to visually smooth out those
rough edges, making the text easier to read. Essentially, it aims to
make on-screen text appear more like printed text.
But, here’s where our problem lies. Animating text with JavaScript
(especially in jQuery) overrides the ClearType feature by telling the
browser to display each step of the pixel throughout animation. When
the animation completes, its left displaying the final step without
ClearType enabled, leaving the text looking a bit crappy. Functions
like fadeIn() and fadeOut() usually trigger the override and cause the
pixel problems. (dauid.com)
An example of JavaScript/JQuery that causes ClearType issue:
$("#div").fadeIn();
To get around the issue, especially for older browsers, you have to remove the filter attributes like this:
// This fixes the ClearType issue in jQuery
$("#div").fadeIn(function(){
this.style.removeAttribute("filter");
});
// This fixes the ClearType issue in animations outside of jQuery
document.getElementById("#div").style.removeAttribute("filter");
Hope it helps others who are experiencing the same issue.
Set the background colour of the link text to match what is behind it.
#slider div.mc-caption a {
color: #354B9A;
font: 13pt bold 'Arial Rounded MT Bold', Verdana, MyriadPro;
background-color:??????
}
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 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.
When viewing my application thru Windows7 IE8, I noticed that the Font Size for H1 and H2 Tags are completely off and too large.
This causes the Titles to wrap and wrecking everything below it.
The Font Sizes are set to em and not px, and Im not sure if this is causing the issue.
font-size: 2.7em;
I have XP w/ IE8 and the application looks fine. I also checked this w/ MS Expression Superview, and it checked fine in all of the browsers.
http://www.davincispainting.com
In this ScreenShot the H1 & H2 Titles appear correct. However, if this is viewed with Windows7 IE8 there exists the problem.
Here are the Style Classes for H1 & H2 Tags:
#mid-feature h1 {
color: #FF0000;
font-family: Arial,Helvetica,sans-serif;
font-size: 2.7em;
}
#midlower-feature h2 {
color: #0C2A55;
font-family: Arial,Helvetica,sans-serif;
font-size: 2em;
/*text-align:center;*/
}
You may wish to include a CSS reset page before your CSS. The purpose of a reset is to get the default state of all elements into a consistent state for all browsers, so your particular CSS styling has a better chance of looking the same on each browser.
YUI has a reset you can use.
In Firefox 3.6, IE7 and Opera 10 on Windows, this HTML has an odd behavior:
<html><head></head>
<style>
span {
font-family: monospace; background-color: green;
}
span.b {
font-weight: bold;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>
The bold span in the middle is shifted down by one pixel. That doesn't happen for other fonts.
Why is that? How can I fix it?
Why is that?
Excellent question. Just spent half an hour trying to figure out the why, to no avail. Marcgg's solution doesn't seem to work, either, the offset is still there. Google turns up nothing. This only seems to happen on Windows, not just in the browsers you mention, but also in Opera 9 and IE6. Not in Firefox 2.0 though. Puzzling.
How can I fix it?
The only solution that has worked so far for me is this:
span {
font-family: Courier; background-color: green;
}
span.b {
font-weight: bold;
}
I.e., specifying Courier instead of monospace. This renders consistently in all browsers I tested (IE6, Opera 9, FF 2.0 under Windows 2000; Opera 10, FF 3, and Konqueror under Ubuntu). As to why, I still have no idea.
It's just an optical effect. Grab a screenshot and zoom in: you'll see the text baseline does not change at all.
It should fix itself if you choose a different colour contrast.
Update
alt text http://img690.imageshack.us/img690/421/opticaleffect.png
The problem is the font "Courier New" which is the default font used my most Windows browsers when "monospace" is requested. For the bold variant, the baseline is at a different offset:
<html><head></head>
<style>
span {
font-family: "Courier New"; background-color: green;
}
span.b {
font-weight: bold; vertical-align:top;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>
With this code, you can see that the middle text is shifted up (= different baseline offset) but the background color is now aligned properly.
The solution is to request "Courier" as a font and to avoid "Courier New".