visual studios not rendering @font-face, relative path issue possibly?
Someone please help me on this issue with @font-face. I have used this technique multiple times and for some reason I can not for the life of me figure out why the font-face is not rendering.
So I have a project called Web.Ui.Store in Visual Studio with two important subdirectories. 1. /Content/css/Typography.css 2. /Content/font/UTILITY-webfont.eot (I have all the fonts provided by FontSquirrel but for explanation just labeling naming this extension.)
Now within the Typography.css I have these lines of code.
@font-face {
font-family: 'UtilityBoldCondensed';
src: url('file:///C:/dev/trunk/Source/Web.Ui.Store/Content/font/UTILITY-webfont.eot#iefix');
src: url('file:///C:/dev/trunk/Source/Web.Ui.Store/Content/font/UTILITY-webfont.eot?') format('embedded-opentype'),
url('file:///C:/dev/trunk/Source/Web.Ui.Store/Content/font/UTILITY-webfont.woff') format('woff'),
url('file:///C:/dev/trunk/Source/Web.Ui.Store/Content/font/UTILITY-webfont.ttf') format('truetype'),
url('file:///C:/dev/trunk/Source/Web.Ui.Store/Content/font/UTILITY-webfont.svg#UtilityBoldCondensed') format('svg');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'LeagueGothicRegular';
src: url('C:\dev\trunk\Source\Web.Ui.Store\Content\font\League_Gothic-webfont.eot');
src: url('C:\dev\trunk\Source\Web.Ui.Store\Content\font\League_Gothic-webfont.eot?#iefix') format('embedded-opentype'),
url('C:\dev\trunk\Source\Web.Ui.Store\Content\font\League_Gothic-webfont.woff') format('woff'),
url('C:\dev\trunk\Source\Web.Ui.Store\Content\font\League_Gothic-webfont.ttf') format('truetype'),
url('C:\dev\trunk\Source\Web.Ui.Store\Content\font\League_Gothic-webfont.svg#LeagueGothicRegular') format('svg');
font-weight: normal;
font-style: normal;
}
.UtilityBoldCondensed { font-family: 'UtilityBoldCondensed', Arial, Sans-Serif; }
.LeagueGothicRegular { font-family: 'LeagueGothicRegular', Arial, Sans-Serif; }
I am confused as to why my "special"fonts won't load on my project. I have cha开发者_如何学JAVAnged the relative path so many times today and still can not get it to render. I have narrowed the problem down to it being an issue with the relative paths for the locations of the files. Can someone help determine if this is correct.
As I can see on google's web-font; the @font-face is always inside a @media screen {}...
Check this out:
http://fonts.googleapis.com/css?family=PT+Sans:regular,italic,bold,bolditalic
精彩评论