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
Related
Font-size is not working on Opera and Chrome, but works on Firefox. Works borders, margins, animations, sizes,font family, but not the font-size.
I have a complicated ul-li navigation in nested spans. I am not able to set the font size on inner <a>. I did not set fonts on other parts/elements yet, except the html - 16px. I tried rem and px units, none is workign in Opera and Chrome. Is there a special way to set font-size for deep nested elements? Why other rules are working?
<div> <span>..12 spans... <span>
<a class='a.aBtn' ><span class='navDecr' ></span></a>
...other 12 <a> tags ...
<ul> <li></li> ...12 li ... </ul>
</span> ... 12 closing spans </div>
//the same error a.aBtn span.navDescr {}
a span.navDescr {
font : 2rem, "Open Sans", sans-serif !important; //this is stroked through
text-align: right;
text-align-last:left;
font-weight:normal;
font-variant: normal;
font-style:normal;
line-height : 1.5; //will be multiplied with font_size
font-stretch: normal;
font-size-adjust:1;
}
If i try to put font on li items children, it also does not work. Works borders, margins, animations, sizes,font family, but not the font-size.
You should use font-size if you want to change the size of a font and font-family to change it to another font
Change from
<a class='a.aBtn' ><span class='navDecr' >Test</span></a>
a span.navDescr {
font : 2rem, "Open Sans", sans-serif !important; //this is stroked through
text-align: right;
text-align-last:left;
font-weight:normal;
font-variant: normal;
font-style:normal;
line-height : 1.5; //will be multiplied with font_size
font-stretch: normal;
font-size-adjust:1;
}
To
<a class='aBtn' ><span class='navDecr' >Test</span></a>
.aBtn span {
font-size : 2rem;
font-family: "Open Sans", sans-serif !important; //this is stroked through
text-align: right;
text-align-last:left;
font-weight:normal;
font-variant: normal;
font-style:normal;
line-height : 1.5; //will be multiplied with font_size
font-stretch: normal;
font-size-adjust:1;
}
It should work
Seems the reason is in some of other font rules.
Finally, find out that "line-height" rules makes font-size not to work in Opera and Chrome browsers.
I mean complicated structure is not related to the problem.
a.aBtn span.navDescr, a.aBtn span.navDescr p {
font-family : "Open Sans", sans-serif !important;
font-size : $aBtnFontSize !important;
text-align: right;
text-align-last:left;
font-weight:normal;
font-variant: normal;
font-style:normal;
//font_size : 3rem !important;
// line-height : 1.5; //opera ignores : MAKES THIS ERROR
font-stretch: normal;
font-size-adjust:1;
}
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.
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;
}
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.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
CSS Font Sizing - Using “/”
What does it mean when there are 2 font sizes in css
ex.
font: 14px/18px Arial,Helvetica,sans-serif;
First part is font-size. Second part is line-height.
It's a CSS 'Shorthand property' for font size and line height, font-size: 14px; and line-height: 18px;
The shortcut for font in css has the form:
font: font-sytle font-weight font-size/line-height font-family
your css code is equivallently to these three:
font-size: 14px;
font-family: Arial, Helvetica, sans-serif;
line-height: 18px;