昨天在写2017年百度ife任务六的时候遇到了一个排版问题,需要首字母字体变大的同时,下划线对齐。
首先使用了 ::first-letter伪元素的选择器,将字体变大后,发现下划线没法对齐,代码如下:
<p>dddddddddd</p>
p{
font-size: 44px;
text-decoration: underline;
}
p:first-letter{
font-size:80px;
}
后来改用 font-variant、text-transform 属性后解决了这个问题,代码如下;
1
2
3
4
5
6
|
p{
font-size: 44px;
text-decoration: underline;
font-variant: small-caps;
text-transform: capitalize;
|
text-transform 属性 这个属性会改变元素中的字母大小写,而不论源文档中文本的大小写。
如果值为 capitalize,则要对某些字母大写,但是并没有明确定义如何确定哪些字母要大写,这取决于用户代理如何识别出各个 “词”。
值 |
描述 |
none |
默认。定义带有小写字母和大写字母的标准的文本。 |
capitalize |
文本中的每个单词以大写字母开头。 |
uppercase |
定义仅有大写字母。 |
lowercase |
定义无大写字母,仅有小写字母。 |
inherit |
规定应该从父元素继承 text-transform 属性的值。 |
兼容性:
浏览器兼容:IE、Firefox、Chrome、Safari、Opera
注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。所有浏览器都支持 text-transform 属性。
font-variant 属性 设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。(意味着已经使用大写字母的文本字体会更大)。
值 |
描述 |
normal |
默认值。浏览器会显示一个标准的字体。 |
small-caps |
浏览器会显示小型大写字母的字体。 |
inherit |
规定应该从父元素继承 font-variant 属性的值。 |
兼容性:
所有主流浏览器都支持 font-variant 属性。注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"
|