css中首字母下沉_具有“首字母”的更好CSS首字下沉

最新推荐文章于 2024-06-03 10:55:17 发布

翻译最新推荐文章于 2024-06-03 10:55:17 发布 · 1.2k 阅读

文章标签：

#java #css #python #编程语言 #html

本文介绍了使用CSS的initial-letter属性创建美观的首字下沉效果，包括如何调整首字母的大小和下沉行数，以及在不同屏幕尺寸下实现响应式排版。

css中首字母下沉

学习CSS：完整指南

无论您是刚刚开始使用基础知识还是想探索更高级CSS，我们都已构建了完整的指南来帮助您学习 CSS。

落帽

首字下沉是一种装饰形式，有时在一段文本的开头使用；首字母深入多行，并在这些行内缩进正文。

这是一种排版传统，与排版本身的历史一样悠久，如今，我们可以使用CSS来使用::first-letter伪元素来模仿它。然而，众所周知，第一个字母的样式笨拙，但是建议的initial-letter属性旨在解决这个问题。让我们检查一下它是什么，我们可以使用它做什么，以及将来可以期待什么。

目前的方法

让我们从一个演示开始；一段文字。

现在，我们使用::first-letter伪元素定位该段落中的第一个字符。当前的样式化方法是使用p::first-letter { float: left; } p::first-letter { float: left; } ，将其从段落中的流中拉出，然后相应地调整大小：

这还不错，可以进一步调整行高，位置等。它也得到很好的支持。但这当然不是完美的。要正确享受首付上限可以给我们带来的好处，我们需要更精确的控制和灵活性。

一种新的解决方案

W3C目前正在将 “ initial-letter属性作为“编辑草稿”来讨论（可能在标准化过程中尽早进行），旨在为我们提供所需的精确印刷控制。它与first-letter结合使用。

它使用的第一个值决定了首字母的大小，取决于它占用了多少行。

p::first-letter {
  initial-letter: 3;
}

看起来像这样：

注意事项

对不起，就在那儿停下来。对此的支持仍然很差。在撰写本文时，仅当您使用Safari OS X或iOS浏览器时，并且仅由于我们使用的是前缀的Webkit语法，以上演示才会正确显示： -webkit-initial-letter: 3;

如果您看不到我看到的内容，请看以下屏幕截图：

您可能会注意到的第一件事是不同的字体。没有浏览器似乎可以很好地使用首字母和网络字体。安装在系统上的所有字体都可以正常工作，尽管必须明确声明它们。使用普通serif或sans-serif; 字体堆栈的末尾似乎没有任何影响。您将需要诸如font-family: "my web font", arial;类的东西font-family: "my web font", arial; 克服浏览器的后备功能。

您将看到的第二件事是页面右侧的文本顶行。这是一个错误，因此暂时需要解决方法。令人高兴的是，可以通过将首字母的边界强制超出包含段落的顶部（从而使浏览器理解顶行不应等于整个容器的宽度）来实现。较大的margin-top值可以解决问题：

@jensimmons这是非浏览器工程师试图解释我*正在*发生的事情的尝试^ Ian pic.twitter.com/tODqdaKX40
— Envato Tuts + Web（@wdtuts） 2016年4月14日

第二值

好吧，继续吧。第二个值的initial-letter接受是可选的。它确定字母下沉多少行，例如：

p::first-letter {
  initial-letter: 3 2;
}

在这里，我们声明该字母深三行，但仅下沉两行。

这被称为“下沉的首字母”，而不是真正的“首字下沉”。同样，如果您没有看到期望的结果，请看下面的截图：

响应Swift

大写字母大写看起来很棒，但是在狭窄的视口中，您应该考虑将大写字母作为响应式排版的一部分。您可能会在小屏幕上看到较小的正文副本，因此也可以考虑使用成比例的首字下沉。

/* set base paragraph styles */
p {
    font-size: 1em;
}

/* set base drop cap styles */
p::first-letter {
    initial-letter: 2;

    color: #c69c6d;
    margin: 1em .2em 0 0;
}

/* mobile first media query */
@media only screen and (min-width: 800px) {
  
    /* set paragraph styles for larger screens */
    p {
        font-size: 1.25em;
    }
  
    /* set drop cap styles for larger screens */
    p::first-letter {
        initial-letter: 3 2;
        margin: 1em .5em 0 0;
    }
  
}

倒退

如果要在不受支持的浏览器中查看这些演示，您可能会想知道如何最好地避免看起来荒谬的结果：

除了使字母实际上表现得像首字下沉的东西以外，我们正在获得所有样式。使用CSS功能查询，您可以有选择地应用样式。将您的@supports样式包装为@supports条件，如下所示：

@supports (initial-letter: 1) or (-webkit-initial-letter: 1) {
 
 /* your initial-letter styles here */
 
}

如果支持首字母缩写，则将应用样式；否则，将不应用样式。

注意：甚至CSS功能查询也没有普遍支持，因此请多加注意。 Modernizr将是一个更安全的选择。

更进一步，您甚至可能想要应用Adobe的dropcap.js JavaScript polyfill ，但我们不会在这里进行介绍。 Dudley Storey 在他的博客上做了出色的工作。

结论

现在还很早，但initial-letter大有希望。请留意其他属性，例如initial-letter-align ，这将有助于非罗马字母，而initial-letter-wrap则将使周围的文本更加紧密。

这里使用的演示功能非常强大，但是可以想象一下装饰排版的大门会打开！原则上，我们可以随意在首字母上使用许多熟悉的属性，包括：

有关其进度的最新信息，最好的选择是关注@jensimmons （她无所不在）。

翻译自: https://webdesign.tutsplus.com/tutorials/better-css-drop-caps-with-initial-letter--cms-26350

css中首字母下沉