Question

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

所以代码是

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

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

Answer 1

使用modernizr，您可能需要CSS规则，如

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

修改

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

Answer 2

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

只要它本质上不具有欺骗性，谷歌似乎可以通过此链接进行讨论。（只要你的图形与你不具有欺骗性的文字相同）

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

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

这是 Gilder / Levin技术（直接从Mezzoblue网站复制） - 你添加一个空的span标签，你的替换图像存在，绝对定位你把它堆叠在原始文本的顶部。现在，也许额外的span标签不符合你的“干净”要求，但在我看来，隐藏或删除真实文本的任何其他技术都更糟糕。

对于那些无法使用font-face的访问者而言，最干净的解决方案可能会略微降级？正确设置，您应该能够使用at-font-face达到99％（ish）的访问者。

<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来查看各种图像替换技术）

Answer 3

将文字放入span并将span设为visibility: hidden。

将文本隐藏为font-face后备？

3 个答案:

更新

将文本隐藏为font-face后备？

3 个答案:

**更新**

更新