Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > HTML > font-size in separate line doesn't quite work for me as expected

Reply
Thread Tools

font-size in separate line doesn't quite work for me as expected

 
 
Mc Lauren Series
Guest
Posts: n/a
 
      02-11-2010
/* CSS Sample 1 */
body {
font: Verdana, Arial;
font-size: small;
}

/* CSS Sample 2 */
body {
font: small Verdana, Arial;
}

Why both the CSS do not produce the same output?

The output with sample 1 is too small. The output with sample 2 is
easily readable. Why the difference?

 
Reply With Quote
 
 
 
 
dorayme
Guest
Posts: n/a
 
      02-11-2010
In article
<(E-Mail Removed)
m>,
Mc Lauren Series <(E-Mail Removed)> wrote:

> /* CSS Sample 1 */
> body {
> font: Verdana, Arial;
> font-size: small;
> }
>
> /* CSS Sample 2 */
> body {
> font: small Verdana, Arial;
> }
>
> Why both the CSS do not produce the same output?
>
> The output with sample 1 is too small. The output with sample 2 is
> easily readable. Why the difference?


In Sample 1, you are not specifying *both* font-size and
font-family in the shorthand version. If you try:

body {
font: 1000px Verdana, Arial;
font-size: small;
}

for Sample 1 (does not matter what you put in font for size, it
gets overridden. But *some* font-size needs to be there before
the family.

--
dorayme
 
Reply With Quote
 
 
 
 
Jonathan N. Little
Guest
Posts: n/a
 
      02-11-2010
dorayme wrote:
> In article
> <(E-Mail Removed)
> m>,
> Mc Lauren Series<(E-Mail Removed)> wrote:
>
>> /* CSS Sample 1 */
>> body {
>> font: Verdana, Arial;
>> font-size: small;
>> }
>>
>> /* CSS Sample 2 */
>> body {
>> font: small Verdana, Arial;
>> }
>>
>> Why both the CSS do not produce the same output?
>>
>> The output with sample 1 is too small. The output with sample 2 is
>> easily readable. Why the difference?

>
> In Sample 1, you are not specifying *both* font-size and
> font-family in the shorthand version. If you try:
>
> body {
> font: 1000px Verdana, Arial;
> font-size: small;
> }


In other words for the "font" shorthand you need at a minimum to specify
font size *and* font family. So because you didn't the rule was ignored
and if you look at you text closely you will see it is not the oversize
Verdana but whatever you default i, typically a serif Roman or Times font

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Jukka K. Korpela
Guest
Posts: n/a
 
      02-12-2010
Jonathan N. Little wrote:

> In other words for the "font" shorthand you need at a minimum to
> specify font size *and* font family. So because you didn't the rule
> was ignored and if you look at you text closely you will see it is
> not the oversize Verdana but whatever you default i, typically a
> serif Roman or Times font


Aren't we obliged to add that when an author declares Verdana, he either
needs to default font size making the text appear too big to many people's
taste or to set it to some (lower) value, thereby creating trouble when
Verdana is not used. On systems that lack Verdana, either because it was
never installed or because it was taken away, this would result in the
user's default font to be used in a size smaller than the default.

This is one of the key reasons why Verdana should not be used on web pages,
except in special occasions like headings and subscripts.

--
Yucca, http://www.cs.tut.fi/~jkorpela/

 
Reply With Quote
 
Andy Dingley
Guest
Posts: n/a
 
      02-12-2010
On 12 Feb, 05:44, "Jukka K. Korpela" <(E-Mail Removed)> wrote:

> Aren't we obliged to add that when an author declares Verdana,


Verdana: not so much a font, more metadata for annotating
cluelessness.

 
Reply With Quote
 
David Postill
Guest
Posts: n/a
 
      02-12-2010

In article
<(E-Mail Removed)>, on
Thu, 11 Feb 2010 14:38:25 -0800 (PST), Mc Lauren Series wrote:

| /* CSS Sample 1 */
| body {
| font: Verdana, Arial;
| font-size: small;
| }
|
| /* CSS Sample 2 */
| body {
| font: small Verdana, Arial;
| }
|
| Why both the CSS do not produce the same output?
|
| The output with sample 1 is too small. The output with sample 2 is
| easily readable. Why the difference?

The first sample is invalid css.

The properties that can be set, are (in order): "font-style font-variant
font-weight font-size/line-height font-family"

The font-size and font-family values are required. If one of the other
values are missing, the default values will be inserted, if any.
--
David Postill
Dance your Life - Biodanza in Holland - <http://www.danceyourlife.eu>
 
Reply With Quote
 
Lars Eighner
Guest
Posts: n/a
 
      02-12-2010
In our last episode,
<(E-Mail Removed)>, the
lovely and talented Mc Lauren Series broadcast on alt.html:

> /* CSS Sample 1 */
> body {
> font: Verdana, Arial;


You meant font-family. You also did not include a generic family.

> font-size: small;
> }


> /* CSS Sample 2 */
> body {
> font: small Verdana, Arial;
> }


> Why both the CSS do not produce the same output?


Because you have confused font with font-family. You also have not
included a generic family. If Verdana or Arial is not installed, the
font family will fall through to the browser default.

> The output with sample 1 is too small. The output with sample 2 is
> easily readable. Why the difference?


--
Lars Eighner <http://larseighner.com/> Warbama's Afghaninam day: 72
1739.8 hours since Warbama declared Viet Nam II.
Warbama: An LBJ for the Twenty-First century. No hope. No change.
 
Reply With Quote
 
Jonathan N. Little
Guest
Posts: n/a
 
      02-12-2010
Jukka K. Korpela wrote:
> Jonathan N. Little wrote:
>
>> In other words for the "font" shorthand you need at a minimum to
>> specify font size *and* font family. So because you didn't the rule
>> was ignored and if you look at you text closely you will see it is
>> not the oversize Verdana but whatever you default i, typically a
>> serif Roman or Times font

>
> Aren't we obliged to add that when an author declares Verdana, he either
> needs to default font size making the text appear too big to many
> people's taste or to set it to some (lower) value, thereby creating
> trouble when Verdana is not used. On systems that lack Verdana, either
> because it was never installed or because it was taken away, this would
> result in the user's default font to be used in a size smaller than the
> default.
>
> This is one of the key reasons why Verdana should not be used on web
> pages, except in special occasions like headings and subscripts.
>


I totally agree with you with respect to Verdana, and despise the the rule

body { font-size: small; }

But at times explaining to the misinformed of such gets very tiresome
and I feel like a broken record. So this time I decided to narrow my
answer to the OP's question of why the rules had different results.
Hopefully after conveying this tidbit we can follow with sermons on the
ills of Verdana and body { font-size: small; }

--
Take care,

Jonathan
-------------------
LITTLE WORKS STUDIO
http://www.LittleWorksStudio.com
 
Reply With Quote
 
Mc Lauren Series
Guest
Posts: n/a
 
      02-12-2010
On Feb 12, 10:44*am, "Jukka K. Korpela" <(E-Mail Removed)> wrote:
> Jonathan N. Little wrote:
> > In other words for the "font" shorthand you need at a minimum to
> > specify font size *and* font family. So because you didn't the rule
> > was ignored and if you look at you text closely you will see it is
> > not the oversize Verdana but whatever you default i, typically a
> > serif Roman or Times font

>
> Aren't we obliged to add that when an author declares Verdana, he either
> needs to default font size making the text appear too big to many people's
> taste or to set it to some (lower) value, thereby creating trouble when
> Verdana is not used. On systems that lack Verdana, either because it was
> never installed or because it was taken away, this would result in the
> user's default font to be used in a size smaller than the default.
>
> This is one of the key reasons why Verdana should not be used on web pages,
> except in special occasions like headings and subscripts.
>
> --
> Yucca,http://www.cs.tut.fi/~jkorpela/


Could you please suggest me some fonts that look good in the normal
font size? Also, what fallback fonts would be good?
 
Reply With Quote
 
Doug Miller
Guest
Posts: n/a
 
      02-12-2010
In article <(E-Mail Removed)>, Mc Lauren Series <(E-Mail Removed)> wrote:
>
>Could you please suggest me some fonts that look good in the normal
>font size?


"Look good" is a very subjective thing, depending not only on the designer's
preferences but also on those of the viewer(s).

>Also, what fallback fonts would be good?


For sans-serif fonts, Arial is a good fallback; for serif fonts, Times New
Roman is a good choice -- both of those are widely available, and very likely
to be installed on almost any web client that visits your page.

Of course, the final fallback should always be "sans-serif" or "serif", so
that you maintain at least some control over the manner in which your page
displays. Without that, if none of the fonts you have specified exist on the
client machine, the fallback is the browser's default font, whatever that
happens to be.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
Separate Tabs, Separate Sessions BigAndy Firefox 0 05-09-2007 09:27 AM
Separate Tabs, Separate Sessions BigAndy Firefox 0 05-09-2007 09:26 AM
Using separate classpaths for separate classes? Frank Fredstone Java 1 06-27-2006 06:46 AM
C# Databinder.Eval didn't work quite right... =?Utf-8?B?RXNraW1v?= ASP .Net 3 11-07-2004 06:18 PM
How to use several separate classes (separate files) to be executed in one class (another file) EvgueniB Java 1 12-15-2003 01:18 AM



Advertisments