• Locked
5 replies [Last post]
Thu, 2015-10-08 12:16
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 5 years 35 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Why is the below code wrong:

    font: bold .9em/inherit inherit;

was referring to this

They have an example that looks like below:

.example-three {
  /*    weight size/line-height family                         */
  font: bold   1em/2em          "Times New Roman", Times, serif;
}

Also how to know , out of all the properties , which property is compulsory and which ones are not ... i mean while using the shorthand property .

Thank you.

Top
Tags:
Thu, 2015-10-08 17:14
#1
emily008
emily008's picture
Offline
newbie
London, UK
Last seen: 6 years 32 weeks ago
London, UK
Timezone: GMT+5
Joined: 2015-10-07
Posts: 1
Points: 1

how to use font in CSS

Here is the description how to use font in CSS.

font: font-style font-variant font-weight font-size/line-height font-family|caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;

Top
Thu, 2015-10-08 17:27
#2
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 5 years 35 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

???

thats there in the link i have shared already !

Top
Thu, 2015-10-08 18:23
#3
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 20 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Hi gautamz07 font

Hi gautamz07
font font-style, font-variant and font-weight must come before font-size and font-family and are optional.
line-height is optional and must come after font-size and /.
font-size and font-family are required.

Top
Fri, 2015-10-09 05:49
#4
gautamz07
gautamz07's picture
Offline
Enthusiast
Last seen: 5 years 35 weeks ago
Timezone: GMT+5.5
Joined: 2014-04-24
Posts: 265
Points: 403

Thanks Tony, that clarifies a

Thanks Tony, that clarifies a few things:

font: bold .9em/inherit inherit;

so inherit won't work is it , in the shorthand i mean ?

Top
Fri, 2015-10-09 08:57
#5
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 1 year 12 weeks ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9776
Points: 3858

It's supposed to (I thought)

At least it seems to be a legitimate value as far as I can read. The validator disagrees with me. Heathens!
pre.test        Value Error : font inherit is not a font value : bold 1.25em / inherit inherit

Inherit does work with the individual font properties, as seen in this demo, so I guess you'll need to use explicit values or set the properties separately:

 <!DOCTYPE HTML>
<html>
  <head>
    <meta http-equiv="Content-Type"
            content="text/html; charset=utf-8">
 
    <meta name="viewport"
            content="width=device-width; height=device-height; initial-scale=1">
 
    <title>
      Test document
    </title>
 
    <style type="text/css">
/*<![CDATA[*/
 
    body {
        background-color: white;
        color: black;
        font: 100%/1.5 sans-serif;
        margin: 0;
        padding: 1.5em;}
 
    p {
        font-size: 1em;}
 
    pre.test {
        font: bold 1.25em/inherit inherit;}
 
    pre.test2 {
	font-weight: bold;
	font-size: 1.25em;
	line-height: inherit;
	font-family: inherit;}
 
    /*]]>*/
    </style>
  </head>
  <body>
    <p>this is the default font.</p>
 
    <pre>This is the default pre font.</pre>
 
    <pre class="test">This should be the test values.</pre>
 
    <pre class="test2">This should be the separate test values.</pre>
  </body>
</html>

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Top
  • Locked