Strange CSS behaviour with font shorthand - html

<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.

Related

Less: Easiest way to add font-weight to font-family variables

I'm working on a system that uses LESS for styling. The variables for the font families look like this:
#font-family-regular: "robotoregular", sans-serif;
#font-family-bold: "robotobold", sans-serif;
#font-family-condensedregular: "roboto_condensedregular", sans-serif;
#font-family-condensedbold: "roboto_condensedbold", sans-serif;
Now I have to change the font family to Arial. I'm going to use Arial Narrow for the condensed fonts:
#font-family-regular: Arial, sans-serif;
#font-family-bold: Arial, sans-serif;
#font-family-condensedregular: "Arial Narrow", sans-serif;
#font-family-condensedbold: "Arial Narrow", sans-serif;
The problem is, that I can't set the font weight of the two bold font styles that way. I could add "font-weight: bold;" manually to all styles that use one of the bold families, but I would like to avoid that.
Is there a way to tell LESS something like "for all elements: if font-family is set to #font-family-bold or #font-family-condensedbold add font-weight: bold;" or something like that? What would be the most elegant solution?
Thank you in advance.
I fear you'll have to change the markup a little bit after all, but this is a solution i can offer, that might work for you:
#font-family-regular: "robotoregular", sans-serif;
#font-family-bold: "robotobold", sans-serif;
#font-family-condensedregular: "roboto_condensedregular", sans-serif;
#font-family-condensedbold: "roboto_condensedbold", sans-serif;
.font-face-bold (#font-select) when
(#font-select = #font-family-bold),
(#font-select = #font-family-condensedbold) {
font-weight: bold;
}
.font-face (#size, #font-select) {
font: #size #font-select;
.font-face-bold(#font-select);
}
// USAGE
.my-class {
.font-face(14px, #font-family-regular);
}
.my-bold-class {
.font-face(14px, #font-family-bold);
}
.my-condensed-class {
.font-face(14px, #font-family-condensedregular);
}
.my-condensed-bold-class {
.font-face(14px, #font-family-condensedbold);
}
What i do here is that i create two mixins that are nested in one another. The inner one is conditional and only "does" something if the passed variable is either #font-family-bold or #font-family-condensedbold.
Here is a Live Example of the code above.
Hopefully this works for you.

Line Spacing for Individual Fonts

I'm using custom fonts in WordPress. I do it by defining font family. I'm having problem if line spacing with One if my fonts. If I use line-height code in my custom css I'd theme, it's applied to all the fonts which isn't required. I just want to change line spacing of problematic font. Can we define line spacing for a font while defining its font family?
Best Regards
You can implement font-family with line-height in one class. I mean something like this:
HTML:
<div class="lato-font">Text</div>
<div class="monospace-font">Text</div>
CSS:
.lato-font {
font-family: Lato, sans-serif;
line-height: 1.6;
}
.monospace-font {
font-family: monospace, serif;
line-height: 1.6;
}
In this case you can set custom line-height for each font.
You'll have to define line-height for each element or class that uses the custom font.
h1,h2,h3,h4,h5,h6,.lead-text,.some-other-class,li {
font-family: ######;
line-height: 20px;
}

CSS Font shorthand?

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;
}

html input font

Css on the body tag:
body{
font-family: 'Helvetica', Arial, Lucida Grande, sans-serif !important;
font-size: 12px;
line-height: 1.4;
min-width: 1050px;
min-height: 500px;
color: #333333;
}
Works perfect, however it doesn't seem to work on input fields :S For some reason (while those input fields have NO styling) it uses Lucida Grande for input fields text and rest is just Helvetica, I am 100% sure there is no other font-family tag else where.
What is causing this and why?
Input fields usually have their own style set in browser’s default style sheet. This typically means a browser-dependent font family and a font size of about 90%.
To set their font, you need to use a selector that refers to them, e.g. using
body, input {
font-family: 'Helvetica', Arial, Lucida Grande, sans-serif;
font-size: 12px; /* if that’s what you want... */
line-height: 1.4; /* somewhat excessive */
color: #333333; /* if that’s what you want, but it reduces legibility */
background: white; /* always set background when you set color */
}
body {
min-width: 1050px; /* if you really want this... */
min-height: 500px;
}
(but note that this also affects submit buttons).
Try to use following :
input {
font-family: inherit;
}
Or set any other font, and let see does this change issue.

using 'lighter' weight of a font

I'm trying to use the "Helvetica Light" font, which comes bundled with Helvetica. To do this I read that I had to specify "Helvetica Light" AND font-weight: lighter. I've gotten this to work only by doing this (in SASS):
p
font: "Helvetica Light", Arial, sans-serif
font-size: 12px
font-weight: lighter
and in other instances,
h2.light
font: Helvetica, Arial, sans-serif
font-size: 12px
font-weight: lighter
(or with font-family instead of font)
which is really weird and the only combos that works so far (combining all properties into 'font' doesn't work, and calling the font: as font-family: sometimes doesn't work.
In another rule, I wasn't able to get it to work unless I ONLY had font-weight: lighter with no font specified (but it inherited Helvetica).
Now I copied the exact same font styles as the p and put it in an h4 and it no longer works. Wtf? What am I doing wrong/why is this so buggy?
EDIT: THIS IS NOT A SYNTAX PROBLEM. To the answers below, note that I am using SASS. No semicolons and brackets needed. Also the file I am editing is 5k lines long (a hand me down) and grouped into somewhat organized sections. So I'd like to keep the sections intact until I can refactor it, but then I can't group all the p's and h2.lights together since they are in different sections.
Thanks!
Try this.
p
font: 'Helvetica Light', 'Helvetica', Arial, sans-serif
font-size: 12px
font-weight: 100
Just for reference, lighter works relative to the inherited value. It's better to use absolute values.
http://www.w3.org/TR/CSS2/fonts.html#font-boldness
what finally worked for me was to have font-family as Helvetica, and font-weight as lighter (but not the condensed format, which doesn't work).
Note: this answer was written before the OP specified SASS. It applies to CSS only.
A couple of things you should do to clean this up:
Semi-colons
All your CSS rules should end with a semi-colon, such as font-weight:lighter;
Grouping
As you have 2 identical CSS rules, the fastest and most concise way to do it is this:
p,
h2.light,
other_rules {
font: Helvetica, Arial, sans-serif;
font-size: 12px;
font-weight: lighter;
}
Then for the one rule where you want a different font,
p{ font: "Helvetica Light", Arial, sans-serif; }
Be sure to put your exceptions below the general rules (i.e. in the order I've shown you here) because CSS is implemented in order, and a rule further down the document will take priority.
Try this:
p, h2.light
font: "Helvetica Light", Arial, sans-serif
font-size: 12px
font-weight: lighter
inheritance, establish a base metric typography, so device doesn't crack-up style intersections
body[role="put something here"] h1, p, etc
font-size: 62.5%
Helvetica light, mix with unix-mac-windows-webfont (webfont needs js, may pull you up over edge
font-family
Helvetica Light, Helveticaneue Light, Calibri Light, Helveticaneue, Helvetica, Gill Sans, Myriad Pro, Arial, Lucida Grande, sans-serif
degrade per Meyer, or try just 2 hl, ss... also, check out your mixin
https://github.com/less/less.js/issues/389
Sass for Web Designers by Dan Cedarholm and Chris Coyier