在您的网站没有不常见字体的计算机上显示这些字体
我有一种非常不常见的字体,我想将其用于网站上的一些文本,并且我的代码可以在我的计算机上运行,但不能在其他计算机上运行。
我将字体文件上传到我的网站并添加了此 CSS:
@font-face {
font-family: 'ParisJeTAimeRegular';
src: url(fonts/'parisjetaime-webfont.eot');
src: url(fonts/'parisjetaime-webfont.eot?#iefix') format('eot'),
url(fonts/'parisjetaime-webfont.woff') format('woff'),
url(fonts/'parisjetaime-webfont.ttf') format('truetype'),
url(fonts/'parisjetaime-webfont.svg#webfontysiEwOWy') format('svg');
font-weight: normal;
font-style: normal
}
这可能不是执行此操作的正确方法,或者可能没有简单的方法...但我想检查一下是否值得尝试渲染我有作为文本的字体,或者只是使用文本的图像,而不用担心字体的麻烦。
I have a very uncommon font that I would like to use for a little bit of text on a site, and my code works on my computer, but not others.
I uploaded the font files to my site and added this CSS:
@font-face {
font-family: 'ParisJeTAimeRegular';
src: url(fonts/'parisjetaime-webfont.eot');
src: url(fonts/'parisjetaime-webfont.eot?#iefix') format('eot'),
url(fonts/'parisjetaime-webfont.woff') format('woff'),
url(fonts/'parisjetaime-webfont.ttf') format('truetype'),
url(fonts/'parisjetaime-webfont.svg#webfontysiEwOWy') format('svg');
font-weight: normal;
font-style: normal
}
This might not be the proper way to do this, or there might not be an easy way...but I wanted to check and see if it was worth trying to render the font I have as text, or just go with images of the text and not worry about the hassle of the font.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
将
fonts/
移动到引号内。目前,您的 CSS 字体声明将被忽略,因为它们无效。有效的外部指针具有以下格式之一:url(source)
url("source")
url('source')
url(dir/'source')
另外,如果您的字体仅用于少数情况,请考虑使用图像。许多浏览器忽略自定义字体。
Move
fonts/
inside the quotes. Currently, your CSS font declarations are ignored, because they're invalid. A valid external pointer has either of the following formats:url(source)
url("source")
url('source')
url(dir/'source')
Also, if your font is only used for a few cases, consider using images. Lots of browsers ignore custom fonts.
改变这个:
到这个:
这应该会让你工作。
Change this:
To this:
And that should get you working.
看起来您已经掌握了“防弹语法”,这是一个很好的开始!
除了 Yaypaul 和 Rob W 提到的更改之外,您可能还需要考虑使用 Modernizr 检测不支持 @FontFace 或 CSS3 的浏览器/设备,并以图像或标准字体的形式为这些浏览器创建后备。
Modernizer 使用
.no-fontface
类标记这些浏览器/设备。It looks like you've got the "bulletproof syntax" going there which is a great start!
Aside from the changes mentioned by Yaypaul and Rob W, you might want to consider using Modernizr to detect browsers/devices that don't support @FontFace or CSS3 and create a fallback for those browsers in the form of an image or a standard font.
Modernizer marks these browsers/devices with the
.no-fontface
class.我通常使用 fontsquirrel.com 来寻找很酷的字体来使用。在 fontsquirrel.com 上,您可以单击一种字体,并要求页面生成正确的 css 代码,以便在旅游网站上实现该字体,就像您尝试做的那样。
我的建议是,您从 fontsquirrel 中选择一个随机字体,生成正确的代码,然后将这段 css 与 jetaime 字体一起重复使用,看看是否适合您。如果这有效,那么您可能在某个地方犯了一个小错误。
I normally use fontsquirrel.com to find cool fonts to use. On fontsquirrel.com uou can click on a font and ask the page to generate proper css code for implementing the font on tour site, just as you are trying to do.
My suggestion is that you pick a random font from fontsquirrel, generate the proper code and reuse that piece of css with the jetaime font to see if that'll do the job for you. If that works, you've probably made a tiny mistake somewhere.