search

w3c / csswg-drafts

CSS Working Group Editor Drafts
https://drafts.csswg.org/
Other
4.5k stars 661 forks source link

[css-fonts] Support 1 @font-face (1 file) providing both normal and italic font-styles #3908

Open davelab6 opened 5 years ago

davelab6 commented 5 years ago

@nyshadhr9 pointed out today that this doesn't work as expected:

<html>
  </head>
    <style>
      @font-face {
        font-family: 'Sample VF';
        font-weight: 400;
        font-style: normal;
        src: url("VfItalSlnt-Regular.ttf") format('truetype');
      }
      @font-face {
        font-family: 'Sample VF';
        font-weight: 400;
        font-style: italic;
        src: url("VfItalSlnt-Regular.ttf") format('truetype');
      }
      p1 {
        font-family: 'Sample VF', display;
        font-style: normal;
      }
      p2 {
        font-family: 'Sample VF', display;
        font-style: italic;
      }
    </style>
  </head>

<body>
  <p1>hello world</p1><br>
  <p2>hello world</p2>
</body>
</html>

Screen Shot 2019-05-10 at 9 53 27 AM

VfItalSlnt-Regular.zip

Perhaps rather than duplicating the @font-face, this should be possible:

      @font-face {
        font-family: 'Sample VF';
        font-weight: 400;
        font-style: normal italic;
        src: url("VfItalSlnt-Regular.ttf") format('truetype');
      }
litherum commented 5 years ago

I wonder why it doesn't work. From my reading of the search order rules, I think it should.

svgeesus commented 5 years ago

(tagging as fonts 4, as this concerns variable fonts, and uses descriptors with a pair of values to indicate a range, not just one).