For the life of me I cannot find documentation explaining what the word 'Display' does in the following css:
h1 {
font: 3em 'Display'
}
According to this post about the css font property
http://www.impressivewebs.com/css-font-shorthand-property-cheat-sheet/
the size and font family are mandatory or the rule is ignored.
I thought it must be a built-in font family or something but look at this bin I created:
http://jsbin.com/yuhaw/1/edit?html,css,output
HTML
<h1 class="test1">font: 3em 'Display' </h1>
<h1 class="test2">font: 3em</h1>
<h1 class="test3"> font-size: 3em;font-family: 'Display' </h1>
CSS
h1.test1 {
font: 3em 'Display'
}
h1.test2 {
font: 3em
}
h1.test3 {
font-size: 3em;
font-family: 'Display'
}
If it was the case I would expect test1 and test3 to look identical but they don't. What's going on here?
In the rule h1 { font: 3em 'Display' }, the 'Display' part specifies the font family name. This makes the rule syntactically valid, whereas if it is omitted, the rule is syntactically invalid and gets completely ignored. It does not matter here whether the system actually has a font family named Display. It probably does not, and then the browser uses some fallback font(s), normally its default font.
By the definition of the font shorthand, this rule sets all font properties to their initial values, unless a value is provided for them in the rule. So font-size is set to 3em and font-family to Display and all other font properties to their initial values as specified in CSS specifications. For font-weight, the initial value is normal, so the rule overrides the common and recommended browser default that sets font-weight to bold for h1.
As mentioned, the rule h1 { font: 3em } is ignored (by CSS specifications and in browser practice), so the element is displayed with default settings (in bold and typically in 2em size).
The rule h1.test3 { font-size: 3em; font-family: 'Display' } is valid and gets applied, but it affects only the two specific font properties that it sets. This means that font-weight is bold.
Note: Inheritance has nothing to do with this. This is simply a matter of setting properties on an element, in an author’s style sheet and in a browser’s default style sheet. And the key issue here is the effect of the font shorthand property.
The reason why they are not the same is because for Test3 you inherit all the properties that you do not explicitly set. Every existing style is kept, and you only change the size and the family.
Therefore, Test3 is bold, which is the browser default style for H1.
Test1 is a complete font declaration and resets every unspecified property to a default font. That's why Test1 has a font-weight of normal. You overwrite every font property by specifying a 'complete' font declaration, so the size and family are set to the specified value and the weight is reset to normal, which is browser-default for a font.
In your browser (at least in Chrome), you can inspect the Computed style. In that view, you can also check View inherited properties. If you do that in your fiddle, you can compare all the font properties, and you'll notice those differences.
You can try it. E.g. Google Chrome helps you to see the computed styles using that notation.
element.style {
font: 3em 'Display';
font-family: Display;
font-size: 3em;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: normal;
}
As per documentation, you can specify all the font properties in one declaration, using the following notation :
font: font-style font-variant font-weight font-size/line-height|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;.
there is no such Font Named "Display"
you have to upload the otf to your webserver and enable it that way:
#font-face {
font-family: "Display";
src: url("type/filename.eot");
src: local("☺"),
url("type/filename.woff") format("woff"),
url("type/filename.otf") format("opentype"),
url("type/filename.svg#filename") format("svg");
}
Related
Under the "Rules" tab I can see styles that are either directly assigned, inherited or styles that come from "User Agent Stylesheet". As you can see there is no line-height set in here. However, when I switch to the "Computed" tab, I can see the line-height is 47px. Why is it and where is it coming from? Shouldn't it be located under the "Rules" tab somewhere in the "User Agent Stylesheet"? I don't quite understand how all those rules are categorised, I thought that "User Agent Stylesheet" shows all the default styles for a particular element. However, it looks like this is not the case. Thanks in advance for clearing this up for me.
Why is line-height not appearing under Rules tab?
The line-height is not shown in the Rules tab because it is not part of default user-agent stylesheet for h1 tag. Safari's default user-agent stylesheet can be found here.
h1 {
display: block;
font-size: 2em;
-webkit-margin-before: 0.67__qem;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
font-weight: bold
}
All properties that you see as defined under the h1 above are being shown in the Rules tab because they are part of the User Agent's default stylesheet.
However, the line-height is not a part of it and hence doesn't get shown in the Rules tab.
Why is it getting displayed under the Computed tab when it is not part of UA stylesheet?
Since there is no value specified for line-height, the default value as specified in the spec (which is normal) is used. The W3C spec says the following:
A value of 'normal' sets the 'line-height' to a reasonable value for the element's font. It is suggested that UAs set the 'normal' value to be a number in the range of 1.0 to 1.2.
As you can see the specs there place importance on two points which are:
The line-height is set to a reasonable value for the element's font. So, the font used plays a key role in determining the line-height.
The spec only suggests that UAs use 1.0 to 1.2 as a value and not mandates. This means that each UA can determine a number that it finds reasonable for the element's font.
So, each UA computes the value for line-height as it deems appropriate. Since the UA is actually computing the value instead of picking it up from a default stylesheet, it is shown under Computed tab.
Why is it showing a value of 47px for base font-size of 32px?
As I had mentioned earlier, there is no fixed computation logic for line-height. For the default font, when I set font-size as 2em (32px) and the line-height explicitly as normal, the value that I get is 37px (which is roughly equivalent to line-height: 1.175).
But when I use the Indie Flower (Google font) that you've used on body, the computed value for the line-height is equivalent to 47px. You can see this in the below snippet where I have added three h1 tags - one with no line-height setting, one with line-height: normal and another with line-height: 47px. All three are the same height. So, it seems like UA determines that such a big factor is required for this font unlike others.
h1 {
display: inline-block;
font-size: 2em;
-webkit-margin-before: 0.67em;
-webkit-margin-after: 0.67em;
-webkit-margin-start: 0;
-webkit-margin-end: 0;
font-weight: bold;
background: red;
}
h1.withnumber {
line-height: 47px;
}
h1.normal {
line-height: normal;
}
body {
font-family: 'Indie Flower', cursive;
}
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Indie+Flower" />
<h1>Abcd</h1>
<h1 class='normal'>Abcd</h1>
<h1 class='withnumber'>Abcd</h1>
I am trying to simply make some text be italic with font shorthand.
So far I have this;
font: 36px italic normal Georgia;
But it is not working. The font definetely can be italic as if I set font-style: italic; it works.
You are having a wrong short hand syntax there, it should be
p {
font: italic normal 12px Georgia;
}
Demo
Reference :
Image Credits
As you see in the above image, there are some mandatory syntax for the font property to be declared and you need to maintain an order to make the shorthand work, since you were using 36px at the wrong place, it was breaking out the entire property.
Try this:
font:italic normal 36px Georgia;
Fiddle
yep c-link said it...you can't specify italics and then right after that put "normal"....
shorthand should follow this order:
font:{font-style font-variant font-weight font-size/line-height font-family}
NOTE: font-family and font-size must be specified....if not they will be put at default values...
If you write normal right after 36px italic it would be recognized or say override the italic by normal.
Use like this: font: italic normal 36px Georgia;
Using shorthand properties for font would be best result if you order like below
1. font-style
2. font-variant
3. font-weight
4. font-size/line-height
5. font-family
I am trying to change the font family of an aside tag. I created the following section in my css file -
.instruction {
color: brown;
font: verdana;
}
and assigned aside, class = instruction. But it does not work. I have also tried using aside as an element in CSS to assign the properties like
asign {property: value;}, but no effect.
But if I only use color property, then it works. So is there any issue with assigning font family and related properties to aside tag? I am using Chrome 28.
Use font-family: verdana; instead of font: verdana and when you are using font shorthand properties care of the following order:
1. font-style
2. font-variant
3. font-weight
4. font-size/line-height
5. font-family
And also you cannot apply just one value in shorthand method. For font, it should at least two values for eg. font-siz and font-family
image source
When using the font shorthand you must specify at least a font-family and a font-size - not just one or the other - the exception is when using system fonts - e.g. font: menu;
Also note that the font-family property must appear after font-size.
.instruction {
color: brown;
font: 1em verdana;
}
http://jsfiddle.net/GRBRU/
Either
{
font-family: Verdana;
font-size: 13px;
font-weight: bold;
}
Or:
{
font: 13px bold Verdana;
}
I'm trying to adjust the font weight rather than just "bold". It appears to be doing nothing on Verdana text. Has browser support for this dropped or something?
<div class='business-hours'>
Toll free: (866) 528-4930 · Mon-Fri 9-5 EST
</div>
#hd .top-nav .business-hours {
text-align: right;
font-family: verdana;
font-weight: 600;
font-size: 10px;
color: #9ea3a0;
}
Numeric and other less usual font-weight properties (like semi-bold, book etc.) are supported very poorly across browsers, and AFAIK relevant only if the font itself provides support for the given value (i.e. has a explicit book or 900 font weight defined). So it's not really a sensible thing to use if consistency is desired.
See Are all css font-weight property's values useful?
And reference info at the W3C
Is it an H1 tag or something? Check that you don't have CSS overwriting your less specific rule. Otherwise Syntax is as follows:
<style>
.myboldtext
{
font-weight: 400;
}
</style>
<span class="myboldtext">This is my bold text</span>
400 for regular, 700 for bold.
Hope this helps!
Depending on parent font-styles it can be hard to see that text has in fact been bolded. For example:
p {
font-weight: lightest;
}
p span {
font-weight: bold;
}
and
<p>Hello, <span>world</span></p>
In many browsers its actually difficult to see any difference between the bold text and the regular body text.
Instead of just specifying font-weight: bold; try changing it to
font-weight: 700;
This will tell the browser to render the text with a heavier than even normal bold weight.
What is the usefulness of these 2 things in CSS reset?
What is the problem in resizing of input elements in IE and in which version?
and if legend color doesn't inherit in IE then how it can be solved adding color:#000;
/*to enable resizing for IE*/
input,
textarea,
select {
*font-size:100%;
}
/*because legend doesn't inherit in IE */
legend {
color:#000;
}
The first rule actually doesn't apply on IE only, but on all webbrowsers. Normally you would like to define a global font in the body:
body {
font: 1.1em verdana, arial, sans-serif;
}
But this doesn't get applied (inherited) on the form controls in all webbrowsers. That rule would then apply (only) the font size on them as well. One way is to set the font to inherit on those elements:
input, select, textarea {
font: inherit;
}
But that doesn't work in IE6/7. Another way is to just explicitly include the elements in the rule:
body, input, select, textarea {
font: 1.1em verdana, arial, sans-serif;
}
That only the font-size is been set is probably because the YUI guys would like to keep the form controls their own browser-default font family (which is sans-serif for input and select and is monospace for textarea). The 100% is been used because IE6/7 doesn't support inherit.
As to the second rule: I am not sure what they meant here. I did a little test in IE6/7. The legend just inherits the color from its parent element. Maybe the actual problem lies somewhere else?