- This topic is empty.
-
AuthorPosts
-
October 18, 2012 at 1:08 pm #40371
Senff
ParticipantHey 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.
October 18, 2012 at 1:14 pm #112200TheDoc
MemberInteresting. 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?
October 18, 2012 at 1:40 pm #112194Senff
ParticipantYou 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?October 18, 2012 at 1:48 pm #112195djrolstad
Participantrename the eot files?? Like Adobe Clean 1 and 2 and so on?
October 18, 2012 at 1:51 pm #112196Senff
ParticipantThe filenames are already unique, that’s not the problem.
October 18, 2012 at 1:51 pm #112197TheDoc
MemberIn a perfect world, the browser would be smart enough to look for the font-face declared as `font-style: italic` when using ``.
October 18, 2012 at 2:13 pm #112189Senff
ParticipantIndeed, 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….? :)
October 18, 2012 at 2:47 pm #112190TheDoc
MemberThat’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.
October 18, 2012 at 2:59 pm #112191chrisburton
ParticipantYou should also do a test case in CSS.
Example
h1 {
font: italic bold “Adobe Clean”;
}October 18, 2012 at 11:04 pm #112265cnwtx
MemberI 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).
October 19, 2012 at 9:04 am #112274simoncox
ParticipantThis looks like a good candidate for a mixin then!
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.