无法让@ font-face功能在我的css中运行
使用以下代码:
@font-face {
font-family: bigCaslon;
src: url(http://www.mywebsite.com/web/wp-content/font/BigCaslon.ttf);
font-weight:400;
}
然后在同一个css中将字体设置为:
font-family: 'bigCaslon';
非常感谢任何帮助。
好,所以我将代码更改为以下内容:
@font-face {
font-family: 'MyWebFont';
src: url('../web/wp-content/font/BigCaslon.eot'); /* IE9 Compat Modes */
src: url('../web/wp-content/font/BigCaslon.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../web/wp-content/font/BigCaslon.woff') format('woff'), /* Modern Browsers */
url('../web/wp-content/font/BigCaslon.ttf') format('truetype'), /* Safari, Android, iOS */
url('../web/wp-content/font/BigCaslon.svg#svgFontName') format('svg'); /* Legacy iOS */
}
font-family: 'MyWebFont';
但仍然没有运气。我也创建了其他字体格式
答案 0 :(得分:1)
您不能只使用一个ttf
并期望它能够正常运行。大多数浏览器使用woff
字体文件来呈现自定义字体。此外,要获得完整的浏览器支持,您需要使用BulletProof @font-face syntax:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff') format('woff'), /* Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
从eot
或woff
文件生成svg
,ttf
和otf
个文件
编辑回答评论
只要路径正确,字体文件就不必在同一目录中。 例如,我的目录结构通常如下所示:
assets/
css/
style.css
fonts/
family/
family.ttf
family.svg
family.woff
family.eot
在这种情况下,CSS中我的字体的路径如下所示:
url('../fonts/family/family.eot')
答案 1 :(得分:0)
我将字体全部放在ftp主目录中名为fonts的文件夹中,并在我的主css文件中使用以下语法:
@font-face {
font-family: 'MyWebFont';
src: url('../../font/BigCaslon.eot'); /* IE9 Compat Modes */
src: url('../../font/BigCaslon.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../../font/BigCaslon.woff') format('woff'), /* Modern Browsers */
url('../../font/BigCaslon.ttf') format('truetype'), /* Safari, Android, iOS */
url('../../font/BigCaslon.svg#svgFontName') format('svg'); /* Legacy iOS */
}
然后我引用了字体:
font-family: 'MyWebFont';
感谢所有人让我直接进入并尊重亚当!!