如果字体不可用，请用图像替换文本

发布于 2024-12-13 06:28:16 字数 754 浏览 5 评论 0原文

我有一个网页，它使用非网络安全字体（@font-face...）作为标题。

如果查看者的浏览器不支持此功能，这看起来会很糟糕，因此有没有办法检测此功能并在不支持的情况下用图像替换文本？

@font-face {
    font-family: 'awesomefont';
    src: url('fonts/awesomefont-webfont.eot');
    src: url('fonts/awesomefont-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/awesomefont-webfont.woff') format('woff'),
         url('fonts/awesomefont-webfont.ttf') format('truetype'),
         url('fonts/awesomefont-webfont.svg#awesomefont') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-family: 'awesomefont'; /* Substitute with image if font not supported */
}

p {
    font-family: 'awesomefont', Arial, sans-serif; /* main body text can use alternative font */
}

原文

I have a web page which uses a non-web-safe font (@font-face...) for a header.

This is going to look pretty bad if the viewer's browser does not support this, so is there a way to detect this capability and replace the text with an image if it is not supported?

@font-face {
    font-family: 'awesomefont';
    src: url('fonts/awesomefont-webfont.eot');
    src: url('fonts/awesomefont-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/awesomefont-webfont.woff') format('woff'),
         url('fonts/awesomefont-webfont.ttf') format('truetype'),
         url('fonts/awesomefont-webfont.svg#awesomefont') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1 {
    font-family: 'awesomefont'; /* Substitute with image if font not supported */
}

p {
    font-family: 'awesomefont', Arial, sans-serif; /* main body text can use alternative font */
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

余生共白头 2024-12-20 06:28:16

@font-face {
  font-family: 'Nosifer Caps';
  font-style: normal;
  font-weight: 400;
  src: local('Nosifer Caps Regular'), local('NosiferCaps-Regular'), url('http://themes.googleusercontent.com/static/fonts/nosifercaps/v1/5Vh3eVJZ2pCbwAqfFmh1F3hCUOGz7vYGh680lGh-uXM.woff') format('woff');
}

p {
  font-family: 'Nosifer Caps', cursive; // is this not the point of defining a websafe font after your non-websafe-font????
}

或者你想总是为你的标题指定字体吗？在这种情况下，我什至不会经历处理自定义字体的麻烦。只需创建您的图像并 100% 地使用它即可。为一个标题图像加载整个字体库的开销是愚蠢的。

@font-face {
  font-family: 'Nosifer Caps';
  font-style: normal;
  font-weight: 400;
  src: local('Nosifer Caps Regular'), local('NosiferCaps-Regular'), url('http://themes.googleusercontent.com/static/fonts/nosifercaps/v1/5Vh3eVJZ2pCbwAqfFmh1F3hCUOGz7vYGh680lGh-uXM.woff') format('woff');
}

p {
  font-family: 'Nosifer Caps', cursive; // is this not the point of defining a websafe font after your non-websafe-font????
}

or do you want to ALWAYS have said font for your header.. in which case I wouldn't even go through the hassle of dealing with custom fonts. Just create your image and use that 100% of the time. The overhead of loading an entire font lib for one header image is just silly.

回复收藏 0 原文