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;
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
I grabbed some CSS from a website and while I have a pretty good understanding of basic CSS I don't understand all of the styles/properties here:
font: normal normal bold 36px/54px brandon-grotesque-n7, brandon-grotesque, sans-serif;
Some additional context - this is CSS for a logo, which you can see in this JS Fiddle.
Specifically I am curious about:
Why does it say "normal normal bold"?
Why is there a slash on the font-size?
Why are there three font types listed?
What you are seeing is a shorthand font declaration. It is essentially the same as writing the following:
font-family: brandon-grotesque-n7, brandon-grotesque, sans-serif;
font-size: 36px;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: 54px;
Why does it say "normal normal bold"?
This is font-style, followed by font-variant, followed by font-weight. Another example would be something like italic small-caps bold.
Why is there a slash on the font-size?
This is font-size followed by line-height. In your example, the font-size is 36px and the line-height is 54px.
Why are there three font types listed?
This is called a font stack. The browser will attempt to use those fonts in the order that they are written. If brandon-grotesque-n7 is unavailable on the user's system, the browser will fall back to using brandon-grotesque. If that is unavailable, it will use the system's default sans-serif font.
A helpful cheat sheet for font shorthand:
Cheat sheet source: http://www.impressivewebs.com/css-font-shorthand-property-cheat-sheet/
Just so this question has an answer not in comments. From CSS-Tricks.com:
CSS
font: font-style font-variant font-weight font-size/line-height font-family;
USE
font: italic small-caps normal 13px/150% Arial, Helvetica, sans-serif;
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 know that Alt is used for images in HTML, but is there a way to apply it to text via CSS?
Example:
input { color: #62161e; font-size: 25px; font-family: Lintel; }
So say Lintel does not display properly in some browsers. Is there an alt option to display Helvetica or something?
In CSS, you can specify a list of font families to follow and the browser will use the first one that it supports. So if you want to display Helvetica if Lintel is unavailable, you would simply do this:
font-family: Lintel, Helvetica;
Remember that if the font family has a space in it, you need to surround it in double quotes, like with the line I use for my website:
font-family: "Segoe UI", Arial, Helvetica, sans-serif;
You can provide multiple fonts and the browser will pick the first available font.
Yes, you can chain fonts.
font-family: Lintel, Helvetica, Arial, sans-serif;
If you are defining both font-size and font-family I suggest you use the shorthand version:
font: 25px Lintel, Helvetica, Arial, sans-serif;
You can add more to this as well:
font: (weight) (size)/(line-height) (family);
The only two that are required are size and family.
font: bold 30px/25px Lintel, Helvetica, Arial, sans-serif;