精华内容
下载资源
问答
  • 所以设置成透明再设置聚焦的模式实现下划线消失了 补充知识:Android开发,Design包下TabLayout一些属性修改,字体、下划线颜色 由于时间较长没有用到tablayout,在一次使用中向改变tablayout滑动字体颜色的变化...
  • 一、text-decoration:underline下划线的问题 CSStext-decoration:underline可以给内联文本增加下划线,...有没有什么办法让下划线不要靠得这么近,或者文字可以完整清晰地显示呢? 有,方法还不少,下面逐一介绍,大.

    一、text-decoration:underline下划线的问题

    CSS text-decoration:underline可以给内联文本增加下划线,但是,如果对细节要求较高,就会发现,下划线经常会和中文文字的下边缘搞在一起,英文的话甚至直接穿越,看起来就比较香菇蓝瘦。

    下划线和文字合在一起

    上图几个中文下边缘正好都是横线,结果,可以看到,基本上合在一起分不清谁是谁了,换成微软雅黑字体(见下图),似乎变本加厉了:
    微软雅黑文字下划线重叠

    有没有什么办法让下划线不要靠得这么近,或者文字可以完整清晰地显示呢?

    有,方法还不少,下面逐一介绍,大家可以根据自己的实际项目需求,选择合适的技术选型。

    方法一:text-decoration-skip指定覆盖关系

    理论上,使用下面的CSS:

    a { text-decoration-skip: ink; }

    机会有类似下图的效果:
    skip:ink的效果截图示意

    text-decoration-skiptext-decoration相关的CSS3新的属性,还有很多其他新的CSS3 text-decoration属性,可以指定下划线类型等,具体可参见我之前的文章:“了解CSS3 text-decoration新特性新表现”。

    看上去效果很不错,但是遗憾的是,即使现在快到2017年了,此属性的浏览器支持情况还是很不乐观,包括大头Chrome浏览器目前尚未支持。

    Safari 8+ supports -webkit-text-decoration-skip with values none and skip (other values behave like none or skip)

    目前也就是Safari 8+浏览器支持带-webkit-私有前缀的text-decoration-skip属性,且仅仅支持skip(默认值)和none两个值,换句话说,Safari 8+浏览器默认下划线就是和文字非穿越而是避让效果。这进一步导致CSS代码中没有text-decoration-skip属性出现的必要了。所以,此方法虽然最原生,但时机还不够。

    方法二:使用border-bottom属性模拟

    内联元素虽然不支持垂直方向的margin属性,但是支持垂直方向的padding属性和border属性,并且,对原来的布局定位等没有任何影响。因此,配合padding,我们就可以很有效地调节下边框和文字下边缘的距离,实现我们最想要的的效果,类似下面的CSS代码:

    a {
        text-decoration: none;
        border-bottom: 1px solid;
    }

    效果类似下图:
    下边框模拟的下划线

    如果觉得border-bottom模拟的下划线还是和文字走得太近,我们可以使用padding-bottom再撑开点距离,例如:

    a {
        text-decoration: none;
        border-bottom: 1px solid;
        padding-bottom: 5px;
    }

    则效果类似下面截图:
    padding border配合的下划线效果截图

    眼见为实,您可以狠狠地点击这里:border-bottom模拟下划线文字无重叠demo

    注意,使用border-bottom模拟下划线的时候,border-color最好缺省,这样就会使用文字的color颜色作为边框色,这样,鼠标hover的时候,下划线会自动和文字一起变色,类似下图效果:
    border模拟下划线hover颜色跟着变化效果

    使用border-bottom模拟的另外一个好处就是我们还可以使用虚线下划线:

    a {
        text-decoration: none;
        border-bottom: 1px dashed;
    }

    类似下面实际项目需求的截图就可以使用这种策略:
    军事征文下划线

    方法三:使用box-shadow属性模拟

    我们也可以使用CSS3 box-shadow属性模拟下划线,代码如下:

    a {
        text-decoration: none;
        box-shadow: 0 1px;
    }

    同样,建议颜色值缺省,使用color属性的颜色值。

    效果基本上和border-bottom如出一辙,如下截图:
    box-shadow模拟下划线

    眼见为实,您可以狠狠地点击这里:box-shadow模拟下划线效果demo

    相比border-bottom属性,box-shadow的优势在于,即使我们把内联元素设置成display:inline-block,生成的下划线也不会对垂直对齐或者布局产生影响,但,如果是border-bottom,会增加元素的尺寸,可能就会影响元素的排列。

    但是,box-shadow也有不足,一是兼容性,IE9+才支持,二是只能实线,不能虚线。

    方法四:使用background-image属性模拟

    就是使用CSS3渐变绘制实线或虚线背景图。

    效果截图如下:
    使用background-image实现的下划线效果

    相关CSS代码如下:

    .solid {
        padding-bottom: 2px;
        background-image: linear-gradient(to top, currentColor, currentColor 1px, transparent 1px);
    }
    .dashed {
        padding-bottom: 2px;
        background: linear-gradient(to right, currentColor, currentColor 4px, transparent 4px) repeat-x 0 bottom/7px 1px;    
    }

    由于背景图片是在原本区域内显示,有别于border-bottom或者box-shadow区域外显示,因此,实现的下划线实际上和文字还是很近的,尤其类似yqp这种基线以下的字母,就会合体。一般有两种处理手段,一种是文字增加白色描边,类似下面CSS:

    a {
        text-shadow: 0 1px #fff, 0 -1px #fff, 1px 0 #fff, -1px 0 #fff;
    }

    效果类似下面这样:
    文字白色描边处理重合问题

    第二种就是使用padding-bottom对内联元素增加可视高度。所以,上面实线下划线和虚线下划线均有padding-bottom:2px的设置。

    眼见为实,您可以狠狠地点击这里:background-image模拟下划线效果demo

    对了,突然想起来,demo中的下划线使用的是currentColor变量,但是在Chrome浏览器和IE浏览器下,currentColor作为背景图片色值的时候,当:hover改变元素的color颜色值的时候,背景图片颜色并不会跟着变,Firefox浏览器的表现符合预期,因此,如果使用此方法,需要:hover时候,背景图片重新绘制下。

    使用background-image绘制的好处在于,我们对样式的控制更灵活的,例如我们可以把线放在文字的后面,我们可以上下划线,我们控制虚线的稀松程度,我们也可以使用圆点表示虚线,我们甚至也可以使用径向渐变绘制波浪样子的下划线,甚至可以把线做成倾斜的等等。不足在于IE10+浏览器才支持。

    方法五:使用SVG滤镜处理

    该SVG滤镜相关HTML代码如下:

    <svg class="out">
      <filter id="svg-underline" primitiveUnits="objectBoundingBox">
        <!-- 原图文基础上水平垂直方向一点点扩展并存储到新的层上 -->
        <feMorphology in="SourceGraphic" operator="dilate" radius="0.0075 0.05" result="outline"></feMorphology>
        <!-- 一个蓝色矩形,高度3%然后宽度100%,位置稍微往下一点 -->
        <feFlood flood-color="#34538b" width="1" height="0.03" x="0" y="0.9" result="underline"></feFlood>
        <!-- 遮罩蓝色矩形,这样,文字重合部分边缘会镂空 -->
        <feComposite in="underline" in2="outline" operator="out" result="underline"></feComposite>
        <!-- 效果合体 -->
        <feMerge>
          <feMergeNode in="underline"></feMergeNode>
          <feMergeNode in="SourceGraphic"></feMergeNode>
        </feMerge>
      </filter>
    </svg>
    

    相关CSS代码如下:

    a {
        -webkit-filter: url('#svg-underline');
        filter: url('#svg-underline');
        text-decoration: none;
    }

    然后,实现的效果类似下面的截图(截自Chrome浏览器):
    SVG滤镜实现的下划线

    看上去很麻烦很啰嗦,hover变色还需要另外的处理,SVG滤镜兼容性并不乐观,IE现在都不支持,所以,这种方法的意义在哪里?

    意义就在于可以实现真正意义上的text-decoration-skip效果,也就是下划线和文字重叠的位置自动从文字下面穿过,并且附近完全是真正的透明,仔细看上面截图,可以看到,文字和下划线接触的位置的地方,看上去有1像素的接触点是透明的。

    原生的Safari外加SVG滤镜下的Chrome/Firefox,也就是绝大多数浏览器都可以实现下划线和文字自动接触点镂空的效果。

    眼见为实,您可以狠狠地点击这里:使用SVG滤镜模拟下划线demo

    方法六:使用canvas实现(著名的Underline.js)

    Underline.js项目地址:https://github.com/wentin/underlineJS

    作者是这位妹纸(图片源自网络):
    文婷

    zhangwenting,目前任职于 Adobe Typekit。

    underline.js同样实现的是下划线和文字重叠自动避让的效果,类似下图:
    underline.js实现效果示意

    您可以狠狠地点击这里:canvas原理的underline.js解决下划线重叠demo

    基本上,下划线文字穿越效果只有英文才好看,中文如果穿越,我去,基本上下划线就没了,尤其类似“金玉全王”这样的汉字:
    下划线穿越效果

    所以,对于中文,最好的效果还是避让,就是直接线和文字留点距离,这样是最好的。对于,英文为主的内容,则text-decoration-skip效果确实还是挺有价值的。

    根据我自己对underline.js的使用,发现,局限性还不小,内联元素最好要inline-block化,纯inline生成的canvas的垂直位置不是很精准,然后,不支持文字自动换行下划线折线显示,毕竟canvas元素是个独立的替换元素,跟图片一样,不可能换行时候分一半上面再一半下面。

    基本上,适合用在局部一些大的标语,标题,slogon等位置或者追求视觉的官方网站或活动页面上使用。

    八、结束语

    今天群里都在玩风景照一下子变成动漫风格的滤镜,实际上,使用PS,分分钟搞定。

    我特意找了张质量很差的自己钓鱼拍的风景图,PS中滤镜搞搞,2分钟,就好了,效果如下:
    钓鱼风景图变水彩动漫风格

    效果还行,如果换个清晰明丽的图,效果会更好。

    步骤如下:
    1. 滤镜→滤镜库→干画笔→0 10 1!
    2. 滤镜→Camera Raw滤镜→色温高,色调绿,曝光增加,对比对增加,阴影和黑色最大,饱和度和清晰度适当增加,然后第三个“细节”小按钮,数量和蒙版很大的值,半径和细节自己看着调;
    3. done!

     

    展开全文
  • 今天收到一份需要内置在...当然另存为 PDF 的话是没有影响的,转换成 PDF 后显示的字体为黑色且没有下划线,但是转换成 html 文件会很难看 解决方法: 按照下图所示,将工具中的 ”修订“ 选项勾选即可。 ...

    今天收到一份需要内置在 APP 中的 word 文档,需要转换成 PDF 格式后内置在 APP assets 目录下。

    打开 WPS 之后修改相关内容之后,出现了下图所示的样式:

    1、显示为蓝色;2、自带下划线),并且无论我怎么取消下划线和更改文字颜色,都没有改变。

    当然另存为 PDF 的话是没有影响的,转换成 PDF 后显示的字体为黑色且没有下划线,但是转换成 html 文件就会很难看

    解决方法:

    按照下图所示,将工具中的 ”修订“ 选项不勾选即可。

     

    展开全文
  • 这里注意不要设置常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,显示浏览器默认的字体。(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。)现在...

    我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体。

     

    body{font-family:"宋体";}

     

    这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体。(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。)
    现在一般网页喜欢设置“微软雅黑”,如下代码:

    body{font-family:"Microsoft Yahei";}

    body{font-family:"微软雅黑";}

    注意:第一种方法比第二种方法兼容性更好一些。

    因为这种字体即美观又可以在客户端安全的显示出来(用户本地一般都是默认安装的)。

    文字排版--字号、颜色

    可以使用下面代码设置网页中文字的字号为12像素,并把字体颜色设置为#666(灰色):

    body{font-size:12px;color:#666}

     

     

     

    文字排版--粗体

     

    我们还可以使用css样式来改变文字的样式:粗体、斜体、下划线、删除线,可以使用下面代码实现设置文字以粗体样式显示出来。

    p span{font-weight:bold;}

    在这里大家可以看到,如果想为文字设置粗体是有单独的css样式来实现的,再不用为了实现粗体样式而使用h1-h6或strong标签了。

    文字排版--斜体

     

    以下代码可以实现文字以斜体样式在浏览器中显示:

    p a{font-style:italic;}
    
    <p>三年级时,我还是一个<a>胆小如鼠</a>的小女孩。</p>

     

     

     

    文字排版--下划线

     

    有些情况下想为文字设置为下划线样式,这样可以在视觉上强调文字,可以使用下面代码来实现:

    p a{text-decoration:underline;}
    
    <p>三年级时,我还是一个<a>胆小如鼠</a>的小女孩。</p>

    文字排版--删除线

     

     

    如果想在网页上设置删除线怎么办,这个样式在电商网站上常会见到:

    上图中的原价上的删除线使用下面代码就可以实现:

     .oldPrice{text-decoration:line-through;}

    转载于:https://www.cnblogs.com/zhengyuan1314/p/7008352.html

    展开全文
  • 这里注意不要设置常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,显示浏览器默认的字体。(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。) 现在一般网

    我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子,下面代码实现:为网页中的文字设置字体为宋体。

    body{font-family:"宋体";}

    这里注意不要设置不常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,就会显示浏览器默认的字体。(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。)
    现在一般网页喜欢设置“微软雅黑”,如下代码:

    body{font-family:"Microsoft Yahei";}

    body{font-family:"微软雅黑";}

    注意:第一种方法比第二种方法兼容性更好一些。

    因为这种字体即美观又可以在客户端安全的显示出来(用户本地一般都是默认安装的)。

    文字排版--字号、颜色

    可以使用下面代码设置网页中文字的字号为12像素,并把字体颜色设置为#666(灰色):

    body{font-size:12px;color:#666}


    文字排版--粗体

    我们还可以使用css样式来改变文字的样式:粗体、斜体、下划线、删除线,可以使用下面代码实现设置文字以粗体样式显示出来。

    p span{font-weight:bold;}

    在这里大家可以看到,如果想为文字设置粗体是有单独的css样式来实现的,再不用为了实现粗体样式而使用h1-h6或strong标签了。

    文字排版--斜体

    以下代码可以实现文字以斜体样式在浏览器中显示:

    p a{font-style:italic;}
    
    <p>三年级时,我还是一个<a>胆小如鼠</a>的小女孩。</p>


    文字排版--下划线

    有些情况下想为文字设置为下划线样式,这样可以在视觉上强调文字,可以使用下面代码来实现:

    p a{text-decoration:underline;}
    
    <p>三年级时,我还是一个<a>胆小如鼠</a>的小女孩。</p>

    文字排版--删除线


    如果想在网页上设置删除线怎么办,这个样式在电商网站上常会见到:

    上图中的原价上的删除线使用下面代码就可以实现:

     .oldPrice{text-decoration:line-through;}


    展开全文
  • 项目有个需求,需要通过将docx模板替换文字后生成pdf,但是在linux下生成的pdf无法显示中文和下划线。经过排查,是linux支持中文字体的问题,所以生成的pdf没有中文。找到原因很好处理问题了。 找到需要的...
  • 一、我们上传图片保存到服务器,那么会有获取图片路径...那么我们再来看下如下图:图片是以数字加下划线和中文命名的一张图片,这时我们可以看到,该图片是显示不了给用户看。 解决问题如下: 方法一: 在“Tomc...
  • 这段代码我在其它地方测试过了,能够正常显示,问题出在我把上面那注销的代码反注销后就没有显示了,而且是整个界面都没有显示,我也知道怎么回事,按逻辑看我感觉没有什么问题的,我想是什么地方属性没有设置好,...
  • part 2:Markdown 段落

    2021-02-13 14:30:04
    Markdown 段落没有特殊的格式,直接编写文字好,段落的换行是使用两个以上空格加上回车。 字体 Markdown 可以使用以下几种字体: *斜体文本* _斜体文本_(一个下划线) **粗体文本** __粗体文本__(两个个下划线...
  • CSS格式化排版

    2015-12-10 22:58:34
    }这里注意不要设置常用的字体,因为如果用户本地电脑上如果没有安装你设置的字体,显示浏览器默认的字体。(因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。) 现在
  • CSS 链接样式

    2020-09-21 14:15:17
    这种点击前后一致的样式,其实是超链接的伪类样式,伪类就是根据名称、属性或者内容,而是根据标签处于某种行为或状态时的特征来修饰样式,也就是说超链接将根据不同的状态显示不同的样式。 去掉链接的下划线 ...
  • 这是因为虽然主窗口没有显示,但它只是隐藏了,程序并没有 结束,而是在后台运行。所以这时改动程序,再运行时便会出错。你可以按下调 试栏上面的红色Stop 停止按钮来停止程序运行。你也可以在windows 任务管理 器的...
  • IDEA2019.2中在应用中的错误,这样一直报404错误,在页面中不显示css,js。在使用网上的路径方法后,发现自己是正确的路径,试过...给bootstrap-3.3.7-dist中更名为没有数字下划线bootstrap之后上图,能显示了。 ...
  • 尖括号内无空格,笔记没有空格代码不显示超链接代码区域的使用格式代码区域在typora中显示形式任务列表使用格式任务列表在typora中的显示形式插入相关创建列表相关查看选择字体加颜色颜色速查表自学JAVA课堂第一步 ...
  • 1、变量变量命名规则1、变量名只能以字母、数字和下划线组成2、开头能是数字3、4、变量名要指明变量意图,看了知道是什么5、能用汉语,能用拼音,用英文name1 = 'miyun'name2 = name1name1 = 'shunyi'print ...
  • 变量和赋值Name=’千寻’Name=’小寻’Print(name)运行之后,我们可以发现计算机打印出了我们所输入的第二个name,而没有显示我们第一个name。这里面的Name就是变量,变量相当于我们独一无二的标签,一次print只能...
  • 图片插入word时总显示不全插入图片后不管怎么样都拖拽动文字下方总是出现讨厌的下划线……那么如何通过具体的措施去解决这些问题呢?今天叨叨君与大家分享8个实用的word技巧,解决困扰你多年的Word痛点问题!01图片...
  • 线条

    2012-02-09 15:30:53
    锦绣:颜色在画面上的作用,谁都清楚,可是在单色显示条件下,就不好用了 源明:这时,除了在字体、字形上改变外,还可以用辅助的方法 锦绣:用什么? 源明:线条 锦绣:线条?什么线条?赶紧说清楚呀,特讨厌你...
  • 标识符: 在java程序中有些名字是可以自定义的,而这些自定义的名字我们称作为自定义的标识符...标识符的长度是没有长度显示的 5.标识符的命名一般要有意义(要做到让人简洁明了让人理解) 6.关键字/保留字不能用...
  • Next主题自带的超链接样式仅仅是将超链接的文字添加了下划线且文字颜色仍未改变,显示效果很差且明显翻了很多博客发现都让在./themes/next/source/css/_custom/custom.styl文件中添加新的超链接CSS样式,但是我...
  • 经常会用到给字体加下划线显示不同颜色和大小的字体等需求,经常遇到这种需求都是直接到百度或者谷歌直接把代码粘过来,并没有做系统的整理,今天刚好有时间,把这部分的内容整理一下,便于后续的开发,闲话说,...
  • 在网页中,有时需要为文字设置粗体、斜体或下划线效果,这时需要用到HTML中的文本格式化标签,使文字以特殊的方式显示。 b i s u 只有使用 没有 强调的意思 strong em del ins 语义更强烈 2、标签属性 在...
  • HTML基础

    2020-07-03 18:22:32
    在网页中,有时需要为文字设置粗体、斜体或下划线效果,这时需要用到 HTML 中的文本格式化标签,使文字以特殊的方式显示。 斜体/加粗 <em> <strong> 。em 标签用于表示一段内容中的着重点。strong ...
  • 变量、环境变量

    2018-03-26 16:38:00
    变量的名称只能是英文、数字以及下划线_组成,而且能以数字开头。 用户定义的局部变量或是shell脚本,最好使用小写字符。 变量名、等号和值之间没有空格。如果在复制表达式中加上了空格,bash shell会把值...
  • 很简单吗,分成几个Label来显示不就行了。你说对了,但一旦文本内容稍微有点变化,你可能就要调整各个label的位置了。有没有更好的办法呢?IOS提供了NSAttributedString来解决这类事情,它只需要一个label可以把...
  • souinght 设置

    2015-04-09 16:18:40
    1 开胃菜-初级应用 1.1 选择美丽的界面享受工作 虽然能以貌取人,但似乎从来没有人责备以貌取软件的。...常、加下划线、放大显示等),总有一种方式能让我们一眼能分辨出这个标识是什么。  1.1.1 字体
  • SourceInsight的实用技巧

    2014-01-20 12:02:07
    在SI中,我们可以轻松地把各种类型关键字、变量、标志符、函数、宏、注释等定义为不同的颜色和显示方式(正体或斜体、加粗或正常、加下划线、放大显示等),总有一种方式能让我们一眼能分辨出这个标识是什么。...
  • source insight 用法

    2012-03-01 13:51:34
    在SI中,我们可以轻松地把各种类型关键字、变量、标志符、函数、宏、注释等定义为不同的颜色和显示方式(正体或斜体、加粗或正常、加下划线、放大显示等),总有一种方式能让我们一眼能分辨出这个标识是什么。...
  • sourceinsight使用技巧

    2014-05-22 23:17:17
    在SI中,我们可以轻松地把各种类型关键字、变量、标志符、函数、宏、注释等定义为不同的颜色和显示方式(正体或斜体、加粗或正 常、加下划线、放大显示等),总有一种方式能让我们一眼能分辨出这个标识是什么。...

空空如也

空空如也

1 2 3 4
收藏数 68
精华内容 27
关键字:

下划线没有字就不显示