two @font-face not acting like each other

你说的曾经没有我的故事 提交于 2020-01-11 13:40:20

问题


I'm using two @font-face in CSSreset.css exactly like each other, and just one of them works! This is the style code:

@font-face {
        font-family: 'B Mitra';
        src: url('./fonts/B Mitra.eot');
        src: url('./fonts/B Mitra.eot?#iefix') format('embedded-opentype'),
        url('./fonts/B Mitra.woff') format('woff'),
        url('./fonts/B Mitra.ttf') format('truetype'),
        url('./fonts/B Mitra.svg#webfont') format('svg');
    }

@font-face {
        font-family: 'BBCNassim';
        src: url('./fonts/BBCNassim.eot');
        src: url('./fonts/BBCNassim.eot?#iefix') format('embedded-opentype'),
        url('./fonts/BBCNassim.woff') format('woff'),
        url('./fonts/BBCNassim.ttf') format('truetype'),
        url('./fonts/BBCNassim.svg#webfont') format('svg');
    }

The second @font-face not working well. this is how I use them in my stylesheet:

#Download > a {
        font-family: 'BBCNassim';
    }

This is not working and shows "tahoma" font. the wierd part is, if the "BBCNassim" font not load correctly, the default browser font shows. So, when I use font-family: 'BBCNassim';, the font will be tahoma.

This is the "B Mitra" font witch shows and load correctly:

#Map_Eshterak {
        font-family: 'B Mitra';
    }

SCREENSHOT: http://i.imgur.com/UXmSOmJ.jpg

The problem is not from the font; because if i copy "B Mitra" fonts, and change the name to "BBC Nassim", the same thing will happen.

  • this is my directory : http://i.imgur.com/xV6R8lw.png

回答1:


Could it be the CSS selectors you're using? Does it work if you change your code to:

#Map_Eshterak {
        font-family: 'BBCNassim';
}

And as a side-note, once you get this working you may want to give a font stack, in case your @font-face fonts don't load properly. (For example, font-family: 'BBCNassim', Helvetica, sans-serif; will show Helvetica is BBCNassim isn't available)



来源:https://stackoverflow.com/questions/20904525/two-font-face-not-acting-like-each-other

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!