CSS Font shorthand? - html

I was basically trying to abbreviate "font-style" to just "font" by using the shorthand property. However, it only seems to work if I specify other properties (size/line height/font-family) too on the same selector.
If I comment out any additional specification, the "italic" is ignored! Am I missing something here or am I just not supposed to use
.main{font:italic;}
instead of (for instance)
.main{font-style:italic;}
or
.main{
font:italic 1em/1.2em georgia,"times new roman",serif;}
So, what's the minimum requirements for using the font shorthand?

The font-family and font-size are the minimum styles required for this style property.
Example:
font: 1em "Times New Roman", Times, serif;
An example of a full shorthand would be the following:
font: bold italic small-caps 1em/1.5em verdana,sans-serif
This would replace the original code below:
font-weight: bold;
font-style: italic;
font-variant: small-caps;
font-size: 1em;
line-height: 1.5em;
font-family: verdana,sans-serif

minimal specifications are size and font-name.
In your case it will look like this:
.main{
font: 1em verdana;
}

Related

Specifiy Font-Family Weight/Slant/Style?

So I'm using a font family for header text (Aileron to be specific), and the font family has various weights such as "Light", "Bold", "ExtraBold", and whatnot. How would you declare the specific weight in CSS?
This is my code:
h1{
font-family:Aileron-Black;
font-size:49pt;
letter-spacing:-3px;
color:white;
}
I would experiment with taking off the hyphen and putting the name of the family in quotation marks, but nothing seems to do the trick.
First, incloude the font via CSS in Bold and Thin:
#font-face {
font-family: 'Aileron';
font-style: normal;
font-weight: 100;
src: local('Aileron' ), url('path/to/font/Aileron.woff') format('woff'); }
#font-face {
font-family: 'Aileron';
font-style: normal;
font-weight: 800;
src: local('Aileron-Black' ), url('path/to/font/Aileron-Black.woff') format('woff'); }
Then declare the font-weight you want to use by using the font-weight propety.
For Bold font use 800:
h1{
font-family:'Aileron';
font-size:49pt;
letter-spacing:-3px;
color:white;
font-weight: 800; }
Or for thin font use 100:
h1{
font-family:'Aileron';
font-size:49pt;
letter-spacing:-3px;
color:white;
font-weight: 100; }
You need to use the font-weight property, it takes either a numerical value or a keyword value (such as normal or bold). You need to look up in your CSS code for the font-face declaration of the font you are using, there you will see the specific font-weight.
Here you can find more information.
Regarding your case:
h1{
font-family: "Aileron";
font-size:49pt;
font-weight: bold;
letter-spacing:-3px;
color:white;
}

How to specify a web safe user default font if google font is not available

For the sake of design I like to use very large fonts in headings (around 70 - 85 px) To prevent that from overwhelming the page I need a really thin font. I found Poiret One on google fonts and it is categorized as a cursive family. It is a very thin, very elegant font but the default in the cursive family seems to be comic sans which is just the opposite -- very clunky, bold, and unattractive in large headings. In my css file I have:
h1 {
font-family: 'Poiret One', cursive;
font-weight: 100;
font-size: 85px;
color: #99ccff;
}
I would like to add courier new as a user default font as it is the thinnest of the web safe fonts and add the following attributes to make the character spacing similar to Poiret One so that I don't overflow my bootstrap columns:
font-family: "Courier New";
font-style: normal;
font-size: 4.8em;
font-weight: 400;
letter-spacing: -0.125em;
line-height: 1.5em;
What is the css I can use to tell the browser if Poiret One cannot be viewed by the user, please use courier new with the font modifications as given above?
Looking forward to a solution. Thanks!
Use font-family like this:
font-family: 'Poiret One', cursive, 'Courier New';
When browser doesn't find Poiret One or a cursive font, then it will use Courier New font.

Can I use regular weight font for bold weight?

I want to use 2 fonts: "A-Md" and "A-Bd".
"A-Bd" looks bolder than "A-Md", but both "A-Md" and "A-Bd" font actually have regular weight only.
In this situation, I want to use "A-Bd" as bolder font of "A-Md".
I wrote css as:
#font-face {
font-family: 'A-font';
font-weight: normal;
src: local('A-Md');
}
#font-face {
font-family: 'A-font';
font-weight: bold;
src: local('A-Bd');
}
body {
font-family: 'A-font';
font-weight: bold;
}
I hope 'A-Bd' to be applied to texts. But, the result texts' font is bolder text of 'A-Bd' and it looks bad.
If I set font to be 'A-Bd', then the texts are fine. I want to use 'A-Bd' as bold text for 'A-font' I defined.
How can I use 'A-Bd' itself as a bold version of 'A-font'?
Edit: What you are trying to do is a little unconventional, especially in terms of design where less is more in typfaces. But you could accomplish it with something like this:
#import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);
#import url(http://fonts.googleapis.com/css?family=Nothing+You+Could+Do);
#import url(http://fonts.googleapis.com/css?family=Bangers);
#import url(http://fonts.googleapis.com/css?family=Sonsie+One);
b {
font-family: 'Nothing You Could Do', cursive;
font-weight: normal;
}
p {
font-family: 'Droid Sans Mono', san-serif;
font-weight: normal;
}
p#bangers {
font-family: 'Bangers', cursive;
font-weight: normal;
}
span.sonsie {
font-family: 'Sonsie One', cursive;
font-weight: normal;
}
Then in your body you could apply the other fonts this way:
<p>Main font is Droid Sans Mono and other is <b>Nothing You Could Do</b></p>
<p id="bangers">This is Bangers and <span class="sonsie">this is Sonsie</span></p>
See my JSFiddle example on this here: http://jsfiddle.net/Incredulous/GpJtP/
Used google fonts from here: https://www.google.com/fonts
Sourced here: http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/
If you use tags to specify bold: b, strong, em, or any h# tags (for example), you can set these to display 'your bold font' and font-weight: normal;
You can even set these properties together for multiple elements like so:
b, strong, em {
font-weight: normal;
font-family: 'your bold font';
}
Add other classes to the list as necessary.

CSS inconsistencies between Chrome and IE9 even with the meyer reset?

On the left is Chrome and on the right is IE9.
As you can see with the image above, even with the Meyer CSS Reset there are yet inconsistencies between browsers. Two examples in this image:
IE9 clearly has a darker font for just about all text.
For whatever reason, the <hr/> tags aren't lining up (but they sure are close) and that throws off the rest of the content.
Is there something more I need to do, other than applying the Meyer CSS Reset to get some more consistency between these browsers?
Additionally, with the content you see above, other than colors and font sizes, there are no margins or padding applied after the reset.
CSS
h1 {
font-family: Lato;
font-size: 26px;
font-weight: normal;
color: #154995;
}
h2 {
font-family: Lato;
font-size: 24px;
font-weight: normal;
color: #333333;
}
h3 {
font-family: Lato;
font-size: 20px;
font-weight: normal;
color: #154995;
}
h4 {
font-family: Lato;
font-size: 18px;
font-weight: bold;
color: #333333;
}
h5 {
font-family: Lato;
font-size: 16px;
font-weight: bold;
color: #333333;
}
.small-text {
font-family: Arial, sans-serif;
font-size: 12px;
font-weight: regular;
color: #333333;
}
The differences you point out are all based on the fact that two different fonts are being used in your chrome and IE9 outputs. Once you tweak the css font-family so both browsers use the same font then it should be ok.
UPDATE:
After seeing your css, you're specifying only Lato font for your elements, it seems both chrome and IE9 can't find the font Lato so both are applying a default font, which is different from one to another, try specifying fallback fonts like:
font-family: Lato, Arial, sans-serif;
If above still give you different outputs then Lato is being picked in one browser and not other, you can check that by using:
font-family: Arial, sans-serif;
for all your elements and see the output is the same on both browsers.
UPDATE 2:
Also see instructions on how to add a Lato webfont to your website:
http://www.google.com/webfonts#UsePlace:use/Collection:Lato
According to me font-family you are using is probably not a system font, it's a web font so what's the thing here is 1 browser is taking up the web font and other is not, so the default Times New Roman font is used

Strange CSS behaviour with font shorthand

<div class="timer">00:01:05</div>
The following css generates a 154x30px box:
div.timer
{
font: 700 24px Arial, Helvetica, sans-serif;
}
and this one generates a 154x19px box (on the sam div element).
div.timer
{
font-weight: 700;
font-size: 24px;
font-family: Arial, Helvetica, sans-serif;
}
How can this be possible? I checked the shorthand property and i can't find what I'm doing wrong. I ordered the attributes in the good order, of that I'm preety sure.
When you use a shorthand property, any value you don't specify is reset to the default.
So the first example changes the font-style, font-variant and line-height. The line-height in particular is likely to alter the box size.