Why does changing the font family change the font size? - html

I have a <textarea> inside the <body>. I have applied the following CSS rules:
body {
font-family: sans-serif;
font-size: 16px;
}
textarea {
font-family: monospace;
/* font-family: "Courier New", monospace; */
}
Here's what it looks like in Firefox 31.0:
You can see the result in this JSFiddle. By inspecting the <textarea> with Firebug we can see it does not inherit the <body>'s font-size, but sets it instead to 13px. (0.8em?)
However, if I uncomment the second font-family declaration, strange things happen.
Now the <textarea> seems to inherit <body>'s font-size, even though I didn't change it manually.
Finally, in both cases, Firebug shows that the font-size: 16px of <body> is overridden, even though I didn't find any browser stylesheets there that override it.
This does not seem to occur in Internet Explorer 11 or Chrome 34.
The problem is easily fixed by setting font-size: 0.8em to all <textarea>s, but the cause bothers me a bit.
What may be the cause of this? A bug in Firefox, possibly?

Related

Changing Polymer paper elements default font

What is the best way to change Polymer Paper Elements default font from Roboto to a custom font?
I used the --paper-font-common-base: {} mixin to define my font and this works in most places... but not all. In places like the paper-toolbar for example there is still Roboto applied.
Is there another way to do this?
EDIT
I see the offender now. Inside paper-styles/typography.html there are loads of mixins that specifically define the font... eg
--paper-font-title: {
/* #apply(--paper-font-common-base) */
font-family: 'Roboto', 'Noto', sans-serif;
-webkit-font-smoothing: antialiased;
/* #apply(--paper-font-common-expensive-kerning); */
text-rendering: optimizeLegibility;
/* #apply(--paper-font-common-nowrap); */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-size: 20px;
font-weight: 500;
line-height: 28px;
};
Why are the #apply blocks here commented out? If these weren't commented by default it looks like this wouldn't be a problem. But now I have to go and override every mixin!
EDIT 2
I see there is a note at the top of the typography.html file
/*
Unfortunately, we can't use nested rules
See https://github.com/Polymer/polymer/issues/1399
*/
But this doesn't seem to be true, in Chrome anyway. If I uncomment the #apply(--paper-font-common-base) lines in all the mixins it seems to work. Is this a browser issue?
Overriding the --paper-font-common-base mixin is the correct approach.
The following CSS code should work.
:root {
--paper-font-common-base: {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
};
}
I was unable to find the issue you pointed out, it probably was fixed already. When inspecting the following files, the --paper-font-common-base is being applied as expected.
https://github.com/PolymerElements/paper-styles/blob/master/typography.html
https://github.com/PolymerElements/paper-toolbar/blob/master/paper-toolbar.html

Chrome not respecting rem font size on body tag?

I've taken to using rem's to size fonts in recent projects, then using px as a fallback for older versions of IE.
I've also been setting a font-size of 62.5% on thehtml so I can more easily set font sizes later on in the stylesheet, I then set a font-size of 1.4rem on the body so unstyled elements have a base font-size of at least 14 pixels, see the code below:
html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */
body { background: #fff; font-family: arial; font-size: 1.4rem; line-height: 1.6rem; }
The problem is, Chrome seems to handle this in a strange way ... Chrome seems to set the font sizes correctly on the inital page load, but on subsequent refreshes the font sizes are way bigger than they should be.
SEE FIDDLE (HTML copied below for future reference)
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>Page Title</title>
</head>
<body>
<p>This is a test, this font should have font-size of 14px.</p>
<p>This is a test, this font should have font-size of 14px.</p>
<p>This is a test, this font should have font-size of 14px.</p>
</body>
</html>
Remember, you might need to hit run once or twice in Chrome to see said effect.
Does anybody know what is causing this or if there's a way around it? Am I committing a crime by setting a 62.5% font-size on the html element (I realise there are arguements against doing so)?
The easiest solution that I have found is to simply change the body definition to
body {
font-size: 1.4em;
}
Because it is the body, you don't have to worry about compounding – just use rems everywhere else.
Try:
html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */
*{font-size: 1.4rem;line-height: 1.6rem; }
body { background: #fff; font-family: arial; }
Seems to look better on refreshing the page :)
FIDDLE
Yes, this is a known bug in Chrome, which has been linked already.
I found
html { font-size: 100%; }
seems to work for me.
The * selector is very slow, as the author of this bug in Chrome, I'd advise a workaround like this until the bug is fixed:
body > div {
font-size: 1.4rem;
}
Provided you always have a wrapper div anyway ;)
This seems to be a Chrome bug; see Issue 319623: Rendering issue when using % + REMs in CSS, and/or a partly-merged duplicate: Issue 320754: font-size does not inherit if html has a font-size in percentage, and body in rem
The answer of Patrick is right.
We have the same issue on Android 4.4.3 WebView.
Before:
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
After:
html {
font-size: 62.5%;
}
body {
font-size: 1.6em;
}
With em and not rem, it works !
The way I fix this is by setting an absolute font-size in the body-element. For all the other font-sizes I use rem:
html {
font-size: 62.5%;
}
body {
font-size: 14px;
}
.arbitrary-class {
font-size: 1.6rem; /* Renders at 16px */
}

Why some CSS rules work only in Chrome?

Please go to this page in Chrome and look at the section Aktualności and text:
Tupacsum Ipsum She nearly gave her life....
Then look at this same URL on Firefox and Opera. Next try to explain to me why this rule: font: 12px normal 'Lato', 'Times New Roman'; is not working on this both (FF, Opera) as well as on Chrome.
Did I make a mistake somewhere? Or did I use something that works only on Chrome?
Chrome:
Firefox:
The browser is just confused by the generic font attribute's values. You need to specify more values so it understands where to apply what.
This works fine:
body #main.home > .bottom .right .top article {
font: normal 12px/normal 'Lato', 'Times New Roman';
}
The solution from #ferne97, though is likely a better practice to not use as specific of a selector, only works because the font-family is explicitly set instead of using the same generic font attribute. If you use the simplified selector with the original font attribute values the problem still remains.
Why don't you change it from body #main.home > .bottom .right .top article to .desc p
.desc p {
font-size: 12px;
font-family: 'Lato', 'Times New Roman';
line-height: normal;
}
Be careful when nesting rules when using LESS, you should never really nest more than 3 levels deep. Think of how you would write the actual selector first, then just nest what is needed.

Header Margin Not Specified Anywhere

I'm having an odd issue. I have a simple web page, and for some reason the <h1 /> tag is having a margin-top and margin-bottom of over 18px. There is nothing in my *.css file that specifies this. Firefox Firebug shows me the style that is applied, but there is no margin anywhere.
In the picture, the div that the header text is in (or supposed to be in) has the limits. But the header text is pushed down because of the margin.
What could be causing this?? Is there anywhere in firefox/firebug that can show me EXACTLY where that style came from? It says that the header tag inherited from the body style, but that is only this:
body
{
font-size: .85em;
font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
color: #232323;
background-color: #fff;
}
Any ideas? Thanks in advance.
Headers often have a margin by default. Have a look at using a reset/normalization stylesheet.
Reset or normalization stylesheets reset your styles to a standard baseline across all browsers. The difference between reset and normalization is that resets clear margins, padding, etc. where normalization stylesheets apply sensible defaults.
These links should be of use:
https://stackoverflow.com/questions/167531/is-it-ok-to-use-a-css-reset-stylesheet
Reset Reloaded
normalize.css
That's the default styling for <h1>s. It's similar the fact that <h1>s have larger text size than paragraphs. It's just the default. It can also be overwritten.
Most of the browsers add some default margin and padding.
Try resetting the margin, like so
body{
font-size: .85em;
font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
color: #232323;
background-color: #fff;
margin:0; /* ADD THIS */
}
You can also reset it on the h1
All browsers have a default CSS that is applied to all pages.
Use something like Yahoo's Reset CSS to cancel out any styles applied.

Windows 7 IE8 Font Size Issue with em

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.