隐藏文本作为字体后备？

发布于 2024-09-14 11:38:20 字数 428 浏览 6 评论 0原文

我正在尝试编写一个干净的 html5 网站。我使用 html5 样板作为网站的基础。它带有现代化。对于页面标题，我使用text-shadow和font-face，并通过modernizr设置了一个小的CSS后备（当其中一个功能不可用时，将显示一个png图像作为背景）。

所以代码是

<h1 id="header-title">Title here</h1>

但是，正如您可能已经猜到的，当我将后备 png 图像设置为背景时，“此处标题”文本仍然存在。你知道有什么方法可以把这段文字去掉吗？我希望它尽可能干净。这就是为什么我没有使用任何文本缩进或 JavaScript 来删除innerHTML。

原文

I am trying to code a clean html5 website. I am using the html5 boilerplate as the base of the website. It comes with modernizr. For the page title I am using text-shadow and font-face and have set up a small css fallback via modernizr (when one of the features is not available, a png image will be shown as background).

So the code is

<h1 id="header-title">Title here</h1>

But, as you may have guessed, when I set the fallback png image as background, the "Title here" text is still there. Do you know any way to take that text out? I want it to be as clean as possible. That's why i didn't use any text-indent, or javascript to erase innerHTML.

分享到QQ

分享到微博

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

发布评论

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

浅浅淡淡 2024-09-21 11:38:20

我相信您最好的选择是使用 Gilder/Levin 图像替换技术 - 文本保留但被图形覆盖。

正如此链接中所讨论的，谷歌似乎对此表示同意，只要它本质上不具有欺骗性。（只要您的图形与文字说明的内容相同，您就不会具有欺骗性）

http://mezzoblue.com/archives/2008/05/05/image_replac/

Mezzoblue 网站还对所有流行的图像替换技术进行了很好的总结。

这是 Gilder/Levin 技术（直接从 Mezzoblue 网站复制） - 您在替换图像所在的位置添加一个空的跨度标签，并通过绝对定位将其堆叠在原始文本之上。现在，也许额外的跨度标签不满足您的“干净”要求，但在我看来，隐藏或删除真实文本的任何其他技术都更糟糕。

也许最干净的解决方案是为无法使用字体的访问者提供稍微降低的体验？如果设置正确，您应该能够通过 at-font-face 吸引 99% 的访问者。

<h3 id="header">
    <span></span>Revised Image Replacement
</h3>

/* css */
#header {
    width: 329px;
    height: 25px;
    position: relative;
    }
#header span {
    background: url(sample-opaque.gif) no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    }

更新

Gilder/Levin 的一个缺点是替换图像必须是不透明的。如果它是透明的，则原始文本可能会显示出来，具体取决于图形的外观。

Leahy/Langridge 方法适用于透明图像（Apple 在其导航菜单中使用此技术） - 我知道的唯一缺点是，如果有人在关闭图像并打开 css 的情况下浏览，他们可能看不到任何内容。

Mezzoblue 站点的

<h3 id="header">
    Revised Image Replacement
</h3>

/* css */
#header {
    padding: 25px 0 0 0;
    overflow: hidden;
    background-image: url(sample-opaque.gif);
    background-repeat: no-repeat;
    height: 0px !important;
    height /**/:25px;
    }

再次，如果“css-on，images-off”场景失败，另一种选择是不可接受的 - 单像素图像替换。该技术可以在
找到
mezzoblue.com/tests/revised-image-replacement/
正如另一个回复中所述
css-tricks.com/css-image-replacement/
（抱歉，链接不完整 - 目前每个帖子只允许有 1 个链接。在前面每个 URL 的前面添加一个 www，以查看各种图像替换技术）

I believe your best option would be to use the Gilder/Levin image replacement technique - text stays but is covered up by the graphic.

Google seems ok with it as discussed in this link, as long as it is not deceptive in nature. (and as long as your graphic says the same thing as the text you aren't being deceptive)

http://mezzoblue.com/archives/2008/05/05/image_replac/

The Mezzoblue site also has a nice summary of all the popular image replacement techniques.

Here is the Gilder/Levin technique (copied directly from the Mezzoblue site) - you add an empty span tag where your replacement image lives and with absolute positioning you stack it on top of the original text. Now, maybe the extra span tag doesn't meet your "clean" requirement, but any other technique that hides or removes the real text is worse, in my opinion.

Maybe the cleanest solution is a slightly degraded experience for visitors who can't use the font-face? Properly set-up, you should be able to reach 99 percent(ish) of visitors with at-font-face.

<h3 id="header">
    <span></span>Revised Image Replacement
</h3>

/* css */
#header {
    width: 329px;
    height: 25px;
    position: relative;
    }
#header span {
    background: url(sample-opaque.gif) no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    }

UPDATE

The one downside to Gilder/Levin is the replacement image must be opaque. If it's transparent, the original text may show thru depending on what the graphic looks like.

The Leahy/Langridge Method will work with transparent images (Apple uses this technique for their nav menu) - the only downside I know is if someone is browsing with images turned off and css turned on they may not see any content.

again, from Mezzoblue site

<h3 id="header">
    Revised Image Replacement
</h3>

/* css */
#header {
    padding: 25px 0 0 0;
    overflow: hidden;
    background-image: url(sample-opaque.gif);
    background-repeat: no-repeat;
    height: 0px !important;
    height /**/:25px;
    }

another option if failing the "css-on, images-off" scenario is unacceptable - single pixel image replacement. the technique can be found at
mezzoblue.com/tests/revised-image-replacement/
and as noted in another response
css-tricks.com/css-image-replacement/
(sorry for incomplete links - I'm currently only allowed 1 link per post. add a www to the front of each of the previous URL's to view an assortment of image replacement techniques)

回复收藏 0 原文

逐鹿 2024-09-21 11:38:20

这样的 CSS 规则

body.no-fontface #header-title { 
  text-indent: -9999px; 
}

使用modernizr，您可能需要像Edit

，我想您可以查看此页面并进行选择：http://css-tricks.com/css-image-replacement/

With modernizr, you probably want a CSS rule like

body.no-fontface #header-title { 
  text-indent: -9999px; 
}

Edit

I suppose you can look at this page and have your pick: http://css-tricks.com/css-image-replacement/

回复收藏 0 原文

嘿咻 2024-09-21 11:38:20

将文本放入 span 中，并将该 span 设置为 visibility: hide。

回复收藏 0 原文

~没有更多了~

关于作者

陌伤ぢ

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

隐藏文本作为字体后备？

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

发布评论

评论（3）

更新

UPDATE

关于作者

相关话题

热门标签

推荐作者

1CH1MKgiKxn9p

ゞ记忆︶ㄣ

JackDx

信远

yaoduoduo1995

霞映澄塘

友情链接

隐藏文本作为字体后备？

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

发布评论

评论（3）

** 更新 **

** UPDATE **

关于作者

相关话题

热门标签

推荐作者

1CH1MKgiKxn9p

ゞ记忆︶ㄣ

JackDx

信远

yaoduoduo1995

霞映澄塘

友情链接

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

更新

UPDATE