CSS Import Fonts

问题:

I have 4 Fonts I need to use on a website and i have there files in my website folder

Baskerville.ttc BellGothicstd-Black.otf BellGothicstd-Bold.otf JennaSue.ttf 

I have tried to Import the using @Import and The fonts still do not work here is what I used:

@import url(../fonts/BellGothicStd-Black.otf); @import url(../fonts/BellGothicStd-Bold.otf); @import url(../fonts/Baskerville.ttc); @import url(../fonts/JennaSue.ttf); 

I also tried to use the @font-face Rule this is what I used:

@font-face {   font-family: 'BellGothicBlack';   src:  url('../fonts/BellGothic-Black.otf') format('OpenType'), } @font-face {   font-family: 'BellGothicBold';   src:  url('../fonts/BellGothicStd-Bold.otf') format('OpenType'), } @font-face {   font-family: 'Baskerville';   src:  url('../fonts/Baskerville.ttc') format('OpenType'), } @font-face {   font-family: 'JennaSue';   src:  url('../fonts/JennaSue.ttf') format('TrueType'), } 

Could someone tell me what I'm doing wrong? I think I might be missing some code I'm not really sure.

Thanks in Advance Tom

回答1:

You will need to convert the font into the correct formats for all browsers to display them.. (check rights before you do this)

http://www.fontsquirrel.com/tools/webfont-generator

Your @font-face rule will also need to include all the font types...

Example:

@font-face {   font-family: 'MyWebFont';   src: url('webfont.eot'); /* IE9 Compat Modes */   src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */        url('webfont.woff2') format('woff2'), /* Super Modern Browsers */        url('webfont.woff') format('woff'), /* Pretty Modern Browsers */        url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */        url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */ } 

回答2:

U need to generate font-faceto all the fonts for OS and Browser compatibility.

Font-face generator URL:http://www.fontsquirrel.com/tools/webfont-generator

@font-face {  font-family: 'Helvetica'; src: url('helvetica.eot'); src: url('helvetica.eot?iefix') format('eot'),  url('helvetica.woff') format('woff'),  url('helvetica.ttf') format('truetype'),  url('helvetica.svg#helvetica') format('svg'); font-weight: normal; font-style: normal;  } 

文章来源: CSS Import Fonts