CSS导入字体 [英] CSS Import Fonts

问题描述

我有4个字体我需要在网站上使用，我有我的网站文件夹中的文件

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

我试图导入使用@Import和字体仍然不工作在这里是我用：

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

我也尝试使用@ font-face规则这是我使用的：

  @ 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： 巴斯克维尔; 
 src：url（'../ fonts / Baskerville.ttc'）format（'OpenType'），
} 
 @ font-face {
 font-family：'JennaSue ; 
 src：url（'../ fonts / JennaSue.ttf'）格式（'TrueType'），
} 
  

有人能告诉我我做错了什么吗？

在此先感谢
Tom

解决方案

您需要将字体转换为所有浏览器的正确格式才能显示它们（在此之前检查权限）

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

您的 @ font-face 规则也需要包含所有字体类型...

示例：

  @ font-face {
 font-family ：'MyWebFont'; 
 src：url（'webfont.eot'）; / * IE9兼容模式* / 
 src：url（'webfont.eot？#iefix'）format（'embedded-opentype'），/ * IE6-IE8 * / 
 url（'webfont.woff2 '）格式（'woff2'），/ *超级现代浏览器* / 
 url（'webfont.woff'）格式（'woff'），/ *漂亮的现代浏览器* / 
 url（'webfont .ttf'）格式（'truetype'），/ * Safari，Android，iOS * / 
 url（'webfont.svg＃svgFontName'）format（'svg'）; / *传统iOS * / 
} 
  

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

解决方案

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 */
}

这篇关于CSS导入字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！