Forums

This topic contains 11 replies, has 0 voices, and was last updated by  Senff 6 years, 3 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #40371

    Senff
    Participant

    Hey everyone. I recently came across this piece of code, I believe it’s wrong — but I want to make sure I understand it correctly. Here it goes:

    @font-face {
    font-family: 'Adobe Clean';
    src: url('../Fonts/AdobeClean-Regular.eot');
    src: url('../Fonts/AdobeClean-Regular.eot?#iefix') format('embedded-opentype'), url('../Fonts/AdobeClean-Regular.woff') format('woff'), url('../Fonts/AdobeClean-Regular.otf') format("opentype"), url('../Fonts/AdobeClean-Regular.ttf') format('truetype'), url('../Fonts/AdobeClean-Regular#adobe_cleanbold') format('svg');
    font-weight: 400;
    font-style: normal;
    }

    @font-face {
    font-family: 'Adobe Clean';
    src: url('../Fonts/AdobeClean-Bold.eot');
    src: url('../Fonts/AdobeClean-Bold.eot?#iefix') format('embedded-opentype'), url('../Fonts/AdobeClean-Bold.woff') format('woff'), url('../Fonts/AdobeClean-Bold.otf') format("opentype"), url('../Fonts/AdobeClean-Bold.ttf') format('truetype'), url('../Fonts/AdobeClean-Bold.svg#adobe_cleanbold') format('svg');
    font-weight: 700;
    font-style: normal;
    }

    @font-face {
    font-family: 'Adobe Clean';
    src: url('../Fonts/AdobeClean-It.eot');
    src: url('../Fonts/AdobeClean-It.eot?#iefix') format('embedded-opentype'), url('../Fonts/AdobeClean-It.woff') format('woff'), url('../Fonts/AdobeClean-It.otf') format("opentype"), url('../Fonts/AdobeClean-It.ttf') format('truetype'), url('../Fonts/AdobeClean-It.svg#adobe_cleanitalic') format('svg');
    font-weight: 400;
    font-style: italic;
    }

    @font-face {
    font-family: 'Adobe Clean';
    src: url('../Fonts/AdobeClean-BoldIt.eot');
    src: url('../Fonts/AdobeClean-BoldIt.eot?#iefix') format('embedded-opentype'), url('../Fonts/AdobeClean-BoldIt.woff') format('woff'), url('../Fonts/AdobeClean-BoldIt.otf') format("opentype"), url('../Fonts/AdobeClean-BoldIt.ttf') format('truetype'), url('../Fonts/AdobeClean-BoldIt.svg#adobe_cleanbold_italic') format('svg');
    font-weight: 700;
    font-style: italic;
    }

    You can see that there are four declarations of fonts. One's regular, one's bold, one's italic, and one's bold/italic. However, they all have the same value for font-family: "Adobe Clean".

    I was under the impression that that needs to be a unique name, cause now when any element is given font-family: "Adobe Clean", there are four font styles to choose from (I assume that the last one will be used).

    So my question is, am I correct? Or is the code above actually fine? Reason I'm asking is because someone else (not a newbie, quite an expert) claims it's correct so I'm seriously doubting my own understanding of this.

    #112200

    TheDoc
    Moderator

    Interesting. I’ve always declared them separately, but this looks like it makes much more sense if it actually works. Isn’t that easy to test?

    #112194

    Senff
    Participant

    You know, I tried testing it, and I’m getting really unpredictable results. I’ll set up a test case so I can show what the issue is.

    @thedoc: how COULD it work? How would you call, for example, the third “Adobe Clean” one?

    #112195

    djrolstad
    Participant

    rename the eot files?? Like Adobe Clean 1 and 2 and so on?

    #112196

    Senff
    Participant

    The filenames are already unique, that’s not the problem.

    #112197

    TheDoc
    Moderator

    In a perfect world, the browser would be smart enough to look for the font-face declared as `font-style: italic` when using ``.

    #112189

    Senff
    Participant

    Indeed, it turns out that’s exactly what it does. All four font styles (regular, italics, bold, and bold italics) have the same name, but when the text in the markup is wrapped in `` tags, it will take the second one. When the text in the markup is wrapped in ``, it will take the third one. And then when both tags are used, it will take the fourth one.

    Right….? :)

    #112190

    TheDoc
    Moderator

    That’s awesome!

    Quick side note: instead of wrapping stuff in `` you can just wrap it in a backtick `. This will enable you to show off code inline.

    #112191

    chrisburton
    Participant

    You should also do a test case in CSS.

    Example

    h1 {
    font: italic bold “Adobe Clean”;
    }

    #112265

    cnwtx
    Member

    I believe that is correct, it can be used with four different declarations for different styles. See here: https://developer.mozilla.org/en-US/docs/CSS/@font-face (note that the support tabel is waaay out-of-date on that page).

    #112274

    simoncox
    Participant

    This looks like a good candidate for a mixin then!

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.

icon-link icon-logo-star icon-search icon-star