以图换字的几种方法及优劣分析

以图换字，其实是为了保证页面的可读性，视觉效果等。这样既有利于搜索引擎，又有利于结构查看。由于这种方式被大多数人所认同，所以方法也越来越多：

方法1：使用text-indent的负值，将内容移出容器；方法2：使用display:none，将内容隐藏；方法3：使用padding将文字挤出容器之外，并将超出的部分hidden;方法4：使用font设置超小字体，达到隐藏内容的目的。

方法1（非常不推荐）看起来蛮简单，但其实有几个不理想的地方，1是比较吃资源；2是在ie5下面会出现滞后背景无法显示；3是内容为超链接时，长长的黑色虚框，让你抓狂。方法2（不推荐）其实倒也不复杂，只是需要多添加一个标签，比较浪费；且display:none出现的几率太多，对seo也是会有些许影响的。方法3（推荐）Standard Model下要2层标签才能搞定，不过相对方法1和2还是有优势的，推荐一下。方法4（强烈推荐）只需要将字体设置为0，然后overflow:hidden;如font:0/0 arial;overflow:hidden;就同样可以达到隐藏内容的目的，暂时还没发现有什么副作用，强烈推荐。

转载于:https://www.cnblogs.com/radom/archive/2011/02/19/1958403.html

以图换字的几种方法及优劣分析相关推荐

java equals 判断空_Java 判断字符串是否为空的三种方法与性能分析
[java中判断字符串是否为数字的三种方法 1>用JAVA自带的函数 public static boolean isNumeric(String str){ for (int i = s ...
vue操作dom元素的三种方法介绍和分析
相信大家在做项目的时候,肯定会遇到这样的问题:我点击新增按钮,需要弹出个弹框,然后我点击对应的关闭按钮,关闭弹框,但是新增按钮和关闭按钮操作的是另一个元素,所以需要获取dom元素进行操控,那么在vue ...
Java/Android中汉字转拼音的两种方法，优劣比较
一.前言在我们的开发中,有时会有这样的需求,就是联系人列表按照拼音顺序排列(如通讯录).于是,我也在网上搜到了许多这类的文章,就两种最常见的做法在此进行简单的比较和分析二.汉字转拼音的方法使用第 ...
福禄克网络：突破百米布线的四种方法及优缺点分析
综合布线如何突破百米壁垒这是一个常见问题--您需要连接的终端设备距离较近的电信机房(TR)有点远.虽然行业标准将通道长度限制为100米,但连接设备可能需要150米甚至200米的通道长度. 有四种方法可 ...
Android中汉字转拼音的两种方法，优劣比较
一.前言在我们的开发中,有时会有这样的需求,就是联系人列表按照拼音顺序排列(如通讯录).于是,我也在网上搜到了许多这类的文章,就两种最常见的做法在此进行简单的比较和分析二.汉字转拼音的方法使用第 ...
在photoshop里如何使用抠图，换背景.有几种方法？
PS中可以抠图的工具有很多,针对不同的图采用不同的抠图方法.今天分享这七种抠图方法,对于学习PS的新手来说,非常好用又高效. 从易到难,循序渐进,下面开始分享: 1.套索工具对于有复杂背景,但图片中 ...
JS合并数组的几种方法及优劣比较
本文属于JavaScript的基础技能. 我们将学习结合/合并两个JS数组的各种常用方法,并比较各种方法的优缺点. 我们先来看看具体的场景: var q = [ 5, 5, 1, 9, 9, 6, 4 ...
docker 使用supermin5工具制作镜像并且编写相应的dockerFile文件，并使用此文件来制作相应的镜像。两种方法进行例子分析
一使用supermin5命令(若命令不存在则自己安装)构建centos7系统的docker镜像,镜像名称为centos-7,镜像预装yum.net-tools.initscripts和vi命令,构建 ...
JavaScript清空数组的三种方法及效率分析
方式1,splice 复制代码代码如下: var ary = [1,2,3,4]; ary.splice(0,ary.length); console.log(ary); // 输出 [],空数组 ...

以图换字的几种方法及优劣分析

以图换字的几种方法及优劣分析相关推荐

最新文章

热门文章