When I look at some source code of a website, I find a code that does not yet understand its meaning when the declaration of the font attribute.
Example:
p {
font: Arial 14px/1;
}
I'd like to know exactly what this 14px/1 is for. What's the point of it?
This is a kind of shortcut to apply line-height , which is often important for the font chosen depending on the font type, so do this:
.test {
font: 14px/1 Arial;
}<div class="test">Olá mundo, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar</div>It would be the same as:
.test {
font-family: Arial;
font-size: 14px;
line-height: 1;
}<div class="test">Olá mundo, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar</div> Just to be aware, the order of font: Arial 14px/1; is wrong and probably will not work, correct is font: 14px/1 Arial; because font: as link from W3 it works in this order:
[[ > || < 'font-variant' > || > ]? > [/ < line-height > ]? > ] | caption | icon | menu | message-box | small-caption | status-bar | inherit
Another detail is that line-height: 1 or /1 are not the same thing as line-height: 1px and /1px .
line-height having the value 1 will assume the size of font-size that in the examples is 14px , if it were line-height: 2 would assume 28px , which is double the source and so on .
See the difference:
.comPX {
font: 14px/1px Arial;
}
.comPT {
font: 14px/1pt Arial;
}
.sem {
font: 14px/1 Arial;
}<div class="comPX">
Olá mundo, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo
</div>
<hr>
<div class="comPT">
Olá mundo, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo
</div>
<hr>
<div class="sem">
Olá mundo, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo, bar, foo
</div>This is an abbreviated form for the same code as the following font property:
font-family: Arial
font-size: 14px;
line-height: 1;
This is the syntax of the font property according to w3schools :
font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;