隐藏文字为字体 - 脸部后备？

https://stackoverflow.com/questions/3482771

28-09-2019
|

题

我正在尝试编码干净的HTML5网站。我正在使用 HTML5样板作为网站的基础。它带有现代化。对于页面标题，我正在使用文本阴影和字体面，并通过ModernIzr设置了一个小的CSS后备（如果不可用的功能之一，PNG图像将显示为背景）。

因此代码是

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

但是，正如您可能已经猜到的那样，当我将后备PNG图像设置为背景时，“这里的标题”文本仍然存在。您知道有什么方法可以将该文本取出吗？我希望它尽可能干净。这就是为什么我没有使用任何文本键入或JavaScript来擦除Innerhtml的原因。

解决方案

我相信您的最佳选择是使用吉尔德/列文图像替换技术 - 文本停留，但被图形覆盖。

如本链接中所讨论的那样，Google似乎可以接受，只要它本质上没有欺骗性。（只要您的图形说与您没有欺骗性的文本相同的话）

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

Mezzoblue网站还提供了所有流行的图像替代技术的精美摘要。

这里是 吉尔德/莱文技术 （直接从Mezzoblue站点复制） - 您添加一个空跨度标签，其中替换图像寿命并具有绝对定位，您可以将其堆放在原始文本的顶部。现在，我认为，额外的跨度标签无法满足您的“干净”要求，但是我认为隐藏或删除真实文本的任何其他技术都更糟。

对于无法使用字体面的访客来说，最干净的解决方案是一种有些降低的体验？正确设置，您应该能够达到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%;
    }

更新

吉尔德/列文的一个缺点是替换图像必须不透明。如果它是透明的，则原始文本可能会根据图形的外观显示。

这 Leahy/Langridge方法 将使用透明的图像（Apple在其NAV菜单中使用此技术） - 唯一的缺点是，如果有人浏览图像关闭，并且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/revises-image-replacement/
正如另一种回应中指出的
css-tricks.com/css-image-replacement/
（抱歉，链接不完整 - 我目前每个帖子只允许1个链接。在上一个URL的每个URL的前部添加www，以查看各种图像替换技术）

其他提示

使用Modernizr，您可能想要像CSS规则一样

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

编辑

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

将文字放入 span 并设置 span 到 visibility: hidden.

许可以下： CC-BY-SA 和归因

不隶属于 StackOverflow

隐藏文字为字体 - 脸部后备？

** 更新 **

更新