I have some rather complicated CSS, but the gist is that I have this:
font-family: Arial, Sans-serif;
font-size: 12px;
font-weight: bold;
There are no other font-weight modifiers in my CSS except normal and bold. Chrome works just fine.
IE11 -sometimes- renders this as Arial, but other times as Arial Black. This is on the same page. I tested this on our test Windows 8 box, and it is always the same text that ends up in Arial Black.
Is there any way to prevent this from happening?
OK, this is really silly, but I found out why it is happening.
My element was contained in a html B element, which gets it's own font-weight in IE, overriding the font-weight I set.
IE somehow changes the font in the B element by default. Manually setting font-weight:bold fixed the issue.
It looked like this:
<span style="font-family:Arial; font-weight:bold"><b>text</b></span>
Related
I have this problem:
body{
font-family: 'MyFontFace-font', 'Lucida Grande', Tahoma, Verdana, Arial, etc.
}
H1 {
font-family: 'MyFontFace-font2'
}
And my question is: If the second font ('MyFontFace-font2') is not loaded, will H1 have the font inherited from body, or from default of browser?
Thanks a lot.
The default fallback fonts of the browser will be applied, and any setting on body is ignored.
When you assign a value to a property of an element, like font-family to h1 here, then inheritance will never apply to that property on that element (except, trivially, if you assign the value inherit and the browser supports that). This is not changed by casual things like the value specifying a nonexistent font.
I also tested this with the following simpler document (on a system that has no font named MyFontFace-font2 but has a font named Tahoma):
<!doctype html>
<title>Test5</title>
<style>
body{
font-family: Tahoma;
}
H1 {
font-family: 'MyFontFace-font2'
}
</style>
<h1>Hello world</h1>
In Chrome, Firefox, IE the result is that the browser’s default font is used, not Tahoma. This is the expected result, by the specifications.
If the rule on H1 is omitted, then Tahoma is used, due to inheritance – then the h1 element will inherit the font-family property from its parent.
I have the following HTML:
<div class='box'>text</div>
and CSS:
.box {
/* non-essential */
display: inline-block;
margin: 2em;
background: plum;
/* ESSENTIAL */
transform: rotate(45deg);
font-family: Courier;
}
And this is the fiddle. I've omitted the prefixes here, but they are in the fiddle.
Expected result:
It is also the result I get in Chrome, Firefox, IE9, Safari.
However, in Opera it looks like this:
If I take out the transform (that is, the div is not rotated
anymore), then the text is shown.
If I replace the font with another one, then the text is shown.
So why is this happening and what other solutions do I have?
In case this helps:
Why is this happening
It's happening because Opera has resolved Courier to courier.fon a bit-mapped font, and Opera has not implemented rotation for bit-mapped fonts.
You get the same results with Modern and Roman and any other font where you have a .fon version.
You can look in C:\Windows\Fonts for a complete list.
What other solutions do I have
If you are relying on the exact metrics of the font when it is presented on the page, you may want to consider using a web font.
If calling the font "courier" is important, then you could ignore opera: It's not very popular, this is a bit of an obscure bug, and since Opera is ditching Presto for Webkit, it simply involves waiting.
If you change the font-family tag to the below it works:
font-family:"Courier New", Courier, monospace;
http://jsfiddle.net/3tTyp/1/
Consider the following example
editor css:
.heading{
font-size: 20pt;
font-weight: bold;
font-style: italic;
}
HTML:
<div class="heading"> This is main heading </div>
When I try to remove the bold from whole whole text inside the heading div it won't convert it to normal text. This might be because of the font-weight defined in heading class. Is there a way to toggle the font-weight for such cases?
Are you just trying to change the font-weight back to normal? If so, just delete that line of CSS, or set the property to font-weight:normal;
To get ride of this issue we moved font styling (bold, italic) out from CSS and used the <strong> and <i> tags directly into the content. This seems to be only proper way to do this.
We have a heading element styled as:
<div class="sidebarHeadingFont">Operation</div>
.sidebarHeadingFont {font-family: Arial, Helvetica, sans serif; font-size:10pt; font-weight:bold; color: #003366; }
In Chrome when you put your mouse over this element the font size increases (making the width of the element bigger) and the color changes to white. Why is this?? Doesn't do this in IE or Firefox.
Are you really, really sure you don't have any other css and/or html? Cause it sounds really, really strange..
I have a page that is using a non-standard font and arial as a fail safe. Does anyone know if there is a way to set the font-size conditionally to the font?
<style type="text/css">
body {
font-family: Calibri, arial, sans-serif;
font-size: 1em, .9em, .9em;
/* Where 1em would be for Calibri and .9 would be for arial and sans-serif */
}
</style>
Good question but currently you can't do this until the 'font-size-adjust' property is more widely supported. It normalises fonts that have very different native sizes. This is the simplest definition and example I could find:
http://www.w3schools.com/CSS/pr_font_font-size-adjust.asp
I'd say there's no harm in using it even now and then it'll be ready when browser support improves.
The solution would be to use font-size-adjust. The problem is that it has poor support (IMHO).