Can someone explain it to me, why is my 1em font smaller than browser default? I set font-size on my body tag and using font-family: 'Open Sans', Arial, sans-serif;
Bootstrap sets the font size of <html> to 10px, you need to override this to get the browser default:
html, body {
font-size: 1em;
}
Related
I'm debugging this website. For some reason on IE9, the font sizes load normally and then shrink once everything has loaded.
What's causing this and how can it be fixed? I've double checked with the IE9 inspector and the px values seem to be missing from the body in the CSS.
Here's what I'm seeing via the IE9 inspector:
The CSS should read:
body {
color: #555;
font-family: "Avenir LT W01_55 Roman1475520", Helvetica, Arial, sans-serif;
font-size: 16px;
font-size: 1.6rem;
line-height: 1.875;
font-weight: normal;
}
Apparently IE9 has built-in font-size: 100% for body aswell as html. Set font-sizes for p tag.
In some templates I see some developers use font-size property look like this:
font-size:1em/2em
What does it mean ?
I think the 1em is min-font-size and 2em is max-font-size
Is it true ?
It seems this:
Use:
font: 1em/1.5em bold italic serif;
instead of
font-size: 1em;
line-height: 1.5em;
font-weight: bold;
font-style: italic;
font-family: serif;
it's CSS shorthand properties
When the units are specified in em or ex, the size is defined relative to the size of the font on the parent element. For example, 0.5em is half the font size of the parent of the current element. Referred https://developer.mozilla.org/en-US/docs/Web/CSS/font-size
Its producing smaller font size when I am using bootstrap followed by my old css file.
Exact declaration for font, in my style sheet is: font-size: 0.8em;
bootstrap css is getting bundled but I am manually including my css file in layout page(asp.net mvc) after the bundled styles are rendered. As you can see from below computed styles my css is definitely overriding bootstrap css. but the output is different.
Without bootstrap(computed)
font-family: Verdana, Arial, sans-serif;
font-size: 13px;
body - 0.8em
With bootstrap (computed)
font-family: Verdana, Arial, sans-serif;
font-size: 8px;
body - 0.8em
below are struck through in With bootstrap (computed)
body - 14px
html - 62.5%
I am having an issue with a section of text looking "bolder" on Windows then it does on Mac.
How do I get it displaying the same?
Both browsers are Chrome and its only happening in Chrome.
CSS:
#featured-slider .slide-content header h1 a, #featured-slider .slide-content footer h1 a {
color: #fff;
font-size: 20px;
font-family:'Open Sans', arial, sans-serif;
-webkit-font-smoothing: antialiased;
}
Mac:
Windows:
Try to use short hand properties like this:
font: normal 20px 'Open Sans', arial, sans-serif !important;
The way you have the css set up, it will default to a different font if the first choice is not available. I can't tell if it is doing this from the picture.
It might also be a change in the "font-weight" property.
See if adding this fixes it:
font-weight:normal;
or:
font-weight:400;
I am using the #font-face in css3 to place some fonts on the website without using images for page headings.
However I found that a gap is created below the heading when using the font-face a bit like a paragraph or a line break. The gap size is relative to the font size and increase when the size is increased.
The font type that I am using is Asenine which is relatively small so I have the size set to 60px
I am not sure why this is happening and can't seem to find a fix.
Here is my CSS
}
#font-face {
font-family:'asenine';
src: url('fonts/asenine.eot');
src: url('fonts/asenine.eot?#iefix') format('embedded-opentype'),
url('fonts/asenine.woff') format('woff'),
url('fonts/asenine.ttf') format('truetype');
}
h1{
font-size:60px;
font-family:asenine, Arial, Helvetica, sans-serif;
text-shadow:7px 3px 4px #0c0c0c;
font-weight:100;
}
This might be happening because of line-height. The larger the font size, the larger line height. And use CSS shorthand for font related settings, it's better:
h1 {
font: normal 60px/0 'asenine', Arial, Helvetica, sans-serif;
text-shadow:7px 3px 4px #0c0c0c;
}
The first line means: normal weight, 60px font size, 0px line-height (to remove that space), font-families.