CSS本地字体没有显示 [英] CSS Local Font not showing up
问题描述
HTML：
< head>
一些基本的东西...
< link rel =stylesheethref =css / style.css>
< / head>
CSS：
body {
overflow-x：hidden;
font-family：圆形标准书，Helvetica，Arial，sans-serif！important;
src：url（'CircularStd-Book.eot'）;
src：url（'CircularStd-Book.eot？#iefix'）格式（'embedded-opentype'），
url（'CircularStd-Book.woff'）格式（'woff'），$ （'CircularStd-Book.ttf'）格式（'truetype'），
url（'CircularStd-Book.svg＃CircularStd-Book'）格式（'svg'）;
}
它可以在我的台式电脑上运行，但不能在任何其他电脑上运行。
感谢您的帮助。
仍然不能使用这个：
@ font-face {
font-family：'圆形标准书'，Helvetica，Arial，sans-serif！important;
src：url（'../ font / CircularStd-Book.eot'）;
src：url（'../ font / CircularStd-Book.eot？#iefix'）格式（'embedded-opentype'），
url（'../ font / CircularStd-Book.woff ''）格式（'woff'），
url（'../ font / CircularStd-Book.ttf'）格式（'truetype'），
url（'../ font / CircularStd-Book .svg＃CircularStd-Book'）格式（'svg'）;
}
body {
overflow-x：hidden;
font-family：'圆形标准书'，Arial，sans-serif;
@ font-face
在这里查看一个例子： https://css-tricks.com/snippets/css/using-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'）; / * Legacy iOS * /
}
ody {
font-family：'MyWebFont'，Fallback，sans-serif;
}
另外如上所述，检查路径是否正确。路径是相对于CSS文件本身。
I am at that point where I don't know anymore what I should have coded wrong. For test purposes I want to use a local font for my website. But I don't get it to be displayed on all devices. Here's my code:
HTML:
<head>
some basic stuff ...
<link rel="stylesheet" href="css/style.css">
</head>
CSS:
body {
overflow-x:hidden;
font-family: 'Circular Std Book', Helvetica, Arial, " sans-serif"!important;
src: url('CircularStd-Book.eot');
src: url('CircularStd-Book.eot?#iefix') format('embedded-opentype'),
url('CircularStd-Book.woff') format('woff'),
url('CircularStd-Book.ttf') format('truetype'),
url('CircularStd-Book.svg#CircularStd-Book') format('svg');
}
It does work on my desktop computer, but not on any other pc... Thanks for your help.
Still not working with this one:
@font-face {
font-family: 'Circular Std Book', Helvetica, Arial, " sans-serif"!important;
src: url('../font/CircularStd-Book.eot');
src: url('../font/CircularStd-Book.eot?#iefix') format('embedded-opentype'),
url('../font/CircularStd-Book.woff') format('woff'),
url('../font/CircularStd-Book.ttf') format('truetype'),
url('../font/CircularStd-Book.svg#CircularStd-Book') format('svg');
}
body {
overflow-x:hidden;
font-family: 'Circular Std Book', Arial, sans-serif;
}
Your example seems to be missing @font-face
See an example of it here: https://css-tricks.com/snippets/css/using-font-face/
@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 */
}
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}
Also as mentioned, check the path is correct. The path is relative to the CSS file itself.
这篇关于CSS本地字体没有显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
