帽子样式设计已有数百年甚至数千年的历史。它在印刷样式中使用,旨在从历史中看出新章节或章节的开始。但在数字时代,如何设计样式一直是存在问题的。对于它们的样式设置,还没有一个“干净”的解决方案。
CSS initial-letter
属性可以大大简化操作。
浏览器支持
在哪里可以试用 initial-letter
?Safari 和 Chrome 110 及以上版本均支持此功能。在 Safari 中,该属性需要添加 -webkit-
前缀。在 Firefox 中实现此功能存在尚未解决的问题。
使用以下命令测试 initial-letter
支持情况:
@supports (initial-letter: 1 1) { /* Your supported styles */ }
当前解决方案
目前,您可以在 CSS 中如何设置限量帽的样式?
::first-letter
伪元素可以帮助我们完成部分工作。
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
}
但是,在计算第一个字母的大小时,您可能需要到达“float”等属性。
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 4rem;
float: left;
line-height: 1;
margin-right: 0.25rem;
}
引入像 lh
这样的新 CSS 单元可以减轻部分这种麻烦。但是,这些插件只能提供有限的支持(lh
目前仅在 Chrome 中受支持)。
p::first-letter {
color: hsl(220, 94%, 51%);
font-weight: bold;
font-size: 3lh;
float: left;
line-height: 1;
margin-right: 0.1lh;
}
推出首字母缩写词
借助 initial-letter
属性,您可以更精细地控制此下落帽样式。它接受两个以空格分隔的值:
p::first-letter {
initial-letter: 3.5 3;
}
- 第一个参数定义字母的大小以及将占用的行数。字母会在保持宽高比的同时放大。不能使用负值,但可以使用小数值。
- 第二个参数定义字母接收器。这可以视为字母所在位置的偏移量。第二个值是可选值,不能为负数。如果未提供该键,它会假定字母大小的值向下取整为最接近的整数。这相当于使用关键字“drop”。接收器还接受另一个关键字值“raise”,相当于接收器为 1。
观看此演示,您可以更改相应的值,看看这对下帽样式有何影响。
将其与 ::first-line
结合使用,可以得到如下所示的代码:
p::first-line {
font-variant: small-caps;
font-weight: bold;
font-size: 1.25rem;
}
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
text-shadow: 0.25rem 0.25rem #be4bdb;
}
或者,也可以为其提供 border
。请注意以下示例如何使用“drop”关键字;如果省略该关键字,则它是默认关键字,相当于 3:
css
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 drop;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: #3b5bdb;
border: 0.25rem dashed #be4bdb;
padding: 0.5rem;
border-radius: 5px;
}
可以添加一个 background
或一些 box-shadow
:
p::first-letter {
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: var(--surface-1);
background: #be4bdb;
padding: 0.5rem;
border-radius: 5px;
box-shadow: 0.5rem 0.5rem 0 #3b5bdb;
}
或者将背景裁剪至文本:
p::first-letter {
background: linear-gradient(to bottom right,#1f005c,#5b0060,#870160,#ac255e,#ca485c,#e16b5c,#f39060,#ffb56b);
font-family: "Merriweather", serif;
initial-letter: 3.5 3;
font-weight: bold;
line-height: 1;
margin-right: 1rem;
color: transparent;
-webkit-background-clip: text;
padding: 0.5rem;
}
无限可能,任你选择!
现在,使用 initial-letter
可以更精细地控制帽子样式!您会为排版添加首饰吗?如何设计它们的样式?请告知我们!