我需要在网站上使用 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: 'Baskerville';
src: url('../fonts/Baskerville.ttc') format('OpenType'),
}
@font-face {
font-family: 'JennaSue';
src: url('../fonts/JennaSue.ttf') format('TrueType'),
}
有人可以告诉我我做错了什么吗?我想我可能会丢失一些我不太确定的代码。
提前致谢
汤姆
您需要将字体转换为正确的格式,以便所有浏览器显示它们。(在执行此操作之前检查权限)
http://www.fontsquirrel.com/tools/webfont-generator
Your @font-face
规则还需要包括所有字体类型......
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 */
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)