RE: [css3-fonts] "font-style" and "font-weight" in "@font-face"

Thanks TJ!

Well, I updated my page:

@font-face {
     font-family: myFont1;
     src: url("fonts/times.ttf");
     font-style: italic; 
     font-weight: bold;
    
    }
    
...........................................

    #box{ 
        border: 1px solid red;
        background-color:#FFF;
        padding:10px;
        font-family: myFont1; 
        font-size:30px;
        display:inline-block;
        text-align: center;
        font-style: italic;
        font-weight: bold;
    }

In the "#box" (the 1st one on the screen), I only get the font, but font-style ('italic') and font-weight ('bold') still do not work for none of the browsers.  
http://waplabdc.nokia-boston.com/browser/users/temp/font_face_test.html


is that an issue for the browser?

Thanks,
-Tao



-----Original Message-----
From: ext Tab Atkins Jr. [mailto:jackalmage@gmail.com] 
Sent: Tuesday, December 13, 2011 11:30 AM
To: Yu Tao (Nokia-MP/Boston)
Cc: www-style@w3.org; Barstow Art (Nokia-CIC/Boston)
Subject: Re: [css3-fonts] "font-style" and "font-weight" in "@font-face"

On Tue, Dec 13, 2011 at 8:17 AM,  <tao.yu@nokia.com> wrote:
> Hi,
>
> How do “font-style” and “font-weight” in “@font-face” impact the 
> defined font? I have a test case to specify my own font via 
> “@font-face”,  with preferred “font-style” and “font-weight”, like below:
>
> @font-face {
>
>                 font-family: myFont1;
>                 src: url("fonts/times.ttf");
>                 font-style: italic;
>                 font-weight: bold;
>     }
>
> And
>
>     @font-face {
>                 font-family: myFont2;
>                 src: local("Times New Roman");
>                 font-style: italic;
>                 font-weight: bold;
> }
>
> But somehow in either case “font-style” and “font-weight” do not work 
> on any of the PC browsers (Firefox/IE/Chrome/Opera).  It only works 
> without
> @font-face:
>
>         font-family: "Times New Roman";
>         font-style: italic;
>         font-weight: bold;
>
> My testing page is located at here:
>
> http://waplabdc.nokia-boston.com/browser/users/temp/font_face_test.htm

> l
>
> Can someone help to clarify how “font-style” and “font-weight” work 
> within @font-face?

The various font-* properties in @font-face do not style the font, they specify the *font's* style.  That is, your @font-face declarations above declare that when you use MyFont1 with italic and bold, you'll receive that face.  This allows you to specify multiple faces in a font, and declare which combination of font-* property values should use each face.

~TJ

Received on Tuesday, 13 December 2011 17:08:28 UTC