javascript - 禁用小写字符的下划线 : g q p j y?

Question

有时您不希望下划线盲目地穿过带下划线的页面标题!
有没有办法自动优雅地禁用某些小写字符的下划线？在这些情况下，最好不要给这些小写字母下划线，例如 {g,q,p,j, y}

CSS: h1{ 文本装饰:下划线； }
页面标题: George 安静地跳了起来!

A) 是否有任何方法可以实现如此精致和高级的样式规则？
B) 我们还想取消哪些其他拉丁字符的下划线？
C) 如何设置下划线的粗细？

Answer 1

你也可以用 border-bottom 伪造下划线。这适用于单行，如果显示属性允许元素缩小内容。 (只是避免阻塞)。

这里有一个例子，display:table 允许居中文本和前后换行:http://codepen.io/gc-nomade/pen/vJoKB/什么想法？

1. 设置比字体大小更小的行高，导致文本溢出其容器。
2. 画一个底部边框给文本加下划线
3. SVG 提供了 stroke ，在 CSS 中，我们可以做类似增加 text-shadow 与背景颜色相同的事情。
4. DEMO , 您甚至可以为相似的下划线设置不同的颜色并添加阴影。

   ---

在较旧的浏览器中，您将失去 box-shadow 选项，但您仍然可以使用 double、groove 或 ridge border 颜色与文本不同的样式。

---

感谢@PatNewell 分享这个链接:https://medium.com/designing-medium/7c03a9274f9