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
Related
For instance
#import url('https://fonts.googleapis.com/css?family=Open+Sans');
div {
font:12px black "Open Sans";
}
Isn't accepted by chrome, using single quotes or no quotes doesn't help either. How do you use the font without writing an extra line for font-family?
Actually, the black is what makes that line of CSS invalid. font: 12px "Open Sans"; should work perfectly (and does when I try on Chrome). If you're trying to set font color, do it with the color: black; property.
Actually, Chrome doesn't recognise black, not 'Open Sans'. Use the weight measurement instead:
#import url('https://fonts.googleapis.com/css?family=Open+Sans:400,800');
div {
font: 800 12px 'Open Sans';
}
<div>
Some lipsum text right here.
</div>
black is not a recognised value for font:
The font CSS property is either a shorthand property for setting
font-style, font-variant, font-weight, font-size, line-height and
font-family, or a way to set the element's font to a system font,
using specific keywords.
If you wish to set the font colour, you must use color:
div {
color: #000; /*or color: black;*/
font: 800 12px 'Open Sans';
}
I am trying to rebuild this website in Polymer: http://qprogrammers-mockup.webflow.io/. So I can extend it easily in the future. I have everything down and I am using the same font, font-weight, font-size and I checked this with a chrome extension whatfont?.
But the fonts seems different. The example website is still much sharper. I read the css, but I cannot find out why. I also added:
body {
background-color: e8e8e8;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing:grayscale;
font-family: 'Open Sans', sans-serif;
font-weight: 300;
}
Given your example, I cannot tell how much more CSS you have. But this may just be a case of you not invoking the webfont Open Sans and your browser is reverting to whichever sans-serif it is using. You could add the following line to the top of your CSS and see if it makes a difference:
#import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic);
Finally, you are missing a '#' on your background color property:
background-color: #e8e8e8;
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");
}
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 got a webpage displaying english and hebrew information. The default english font is Verdana, and since Verdana does not support hebrew letters, the next option is Arial.
The problem is that 14px of english (Verdana) are slightly bigger than 14px of the hebrew (Arial).
How can I declare that I want 14px of Verdana, but 16px of Arial on the same element?
Is there any possible way of doing this ?
Thanks
Only if you surround either the english or hebrew with something like a <span> and then style the inline <span> accordingly
By different classes?
.english { font: 14px Verdana; }
.hebrew { font: 16px Arial; }
Well, it seems it can't be done... maybe with JS, but that's not the point.
We had to gave up on Verdana.