CSS中的字体与排版

1.连字符断行

问题:两端对齐的效果的时候,折行效果有的时候真的很丑。
解决:使用hyphens属性。
hyphens 告知浏览器在换行时如何使用连字符连接单词。可以完全阻止使用连字符,也可以控制浏览器什么时候使用,或者让浏览器决定什么时候使用。
它接受三个值:none,manual和auto。它的初始值是manual,以匹配现有的行为:我们可以用软连字符手动断字。

width: 8.7em;
font: 180%/1.4 Baskerville, serif;
text-align: justify;
hyphens: auto;
Paste_Image.png

2.插入换行

  • 问题:对于表格元素,如何使多个<dd>元素在同一行,如何在最后一个<dd>元素后面插入换行符
  • 解决方案:
    使用伪元素,在<dd><dt>中间插入换行符“\A”.
    在<dd><dd>中间插入“,”
    使用white-space: pre;保留源代码中的空格和换行
  • 重点代码:
dd + dt::before {//使用伪元素,在<dd><dt>中间插入换行符“\A”.
    content: "\A";
    white-space: pre;
}

dd + dd::before {//在<dd><dd>中间插入“,”
    content: ', ';
    font-weight: normal;
    margin-left: -.25em;
}
HTML:
<dl>
    <dt>Name:</dt>
    <dd>Lea Verou</dd>
    
    <dt>Email:</dt>
    <dd>lea@verou.me</dd>
    <dd>leaverou@mit.edu</dd>
    
    <dt>Location:</dt>
    <dd>Earth</dd>
</dl>

CSS:
dt, dd {
    display: inline;
    margin: 0;
}

dd {
    font-weight: 600;
}

dd + dt::before {//使用伪元素,在<dd><dt>中间插入换行符“\A”.
    content: "\A";
    white-space: pre;
}

dd + dd::before {//在<dd><dd>中间插入“,”
    content: ', ';
    font-weight: normal;
    margin-left: -.25em;
}

body {
    font: 150%/1.6 Baskerville, Palatino, serif;
}
Paste_Image.png

3.文本行的斑马条纹

  • 解决:利用linear-gradient创建条纹背景,使其的宽度与行高相符
  • 注意:padding会使元素与条纹背景出现错位,所以要对背景设置background-origin:content-box,消除影响
pre { 
    padding: .5em;
    line-height: 1.5;
    background: hsl(20, 50%, 95%);
    background-image: linear-gradient(
                      rgba(120,0,0,.1) 50%, transparent 0);
    background-size: auto 3em; //两行
    background-origin: content-box;
    font-family: Consolas, Monaco, monospace;
}
code { font: inherit }
Paste_Image.png

4.调整tab的宽度

-问题:tab在浏览器中的宽度为8个字符,我们一般会调整成我们习惯的宽度4或2.

tab-size: 2 

5.连字

  • 问题:某些字形与字形相邻时会带来显示上的问题。比如大多数衬线字体中的f和i。在css第三版中,引入了font-variant-ligatures属性。
font-variant-ligatures: comon-ligatures
                        discretionary-ligatures
                        historical-ligatures

6.自定义下划线

用background-image及其相关属性来形成下划线

a {
    background: linear-gradient(gray, gray) no-repeat;
    background-size: 100% 1px;
    background-position: 0 .9em;
    text-shadow: .05em 0 white, -.05em 0 white;
}
Paste_Image.png
a {
    background: linear-gradient(90deg, gray 66%, transparent 0) repeat-x;
    background-size: .2em 2px;
    background-position: 0 .9em;
}
Paste_Image.png

7.现实中的文字效果

凹进去的字体效果
  • 思路:底部加上浅色投影或者顶部加深色投影
底部加上浅色投影
p {
    padding: .8em 1em;
    background: hsl(210, 13%, 60%);
    color: hsl(210, 13%, 30%);
    text-shadow: 0 1px 1px hsla(0,0%,100%,.8);
}
Paste_Image.png
顶部加上深色投影
p + p {
    background: hsl(210, 13%, 30%); 
    color: hsl(210, 13%, 60%);
    text-shadow: 0 -1px 1px black;
}
Paste_Image.png
文字凸起效果

思路:使用一长串累加的投影,不设模糊并以1px的跨度逐渐错开,使颜色逐渐变暗,然后在底层加上一层强烈模糊的暗投影,从而实现效果

body {
    background: #58a;
    color: white;
    text-shadow: 0 1px hsl(0,0%,85%),
                 0 2px hsl(0,0%,80%),
                 0 3px hsl(0,0%,75%),
                 0 4px hsl(0,0%,70%),
                 0 5px hsl(0,0%,65%),//亮度l逐渐变暗
                 0 5px 10px black; //底层加上一层强烈模糊的暗投影
    font: bold 500%/1 Rockwell, serif;
}
Paste_Image.png
空心字

思路:使用SVG描边方法

<h1>CSS</h1>

<h1><svg overflow="visible" width="2em" height="1.2em"><use xlink:href="#css" /><text id="css" y="1em">CSS</text></svg></h1>
h1 {
    margin: 0;
    color: white;
}

h1:first-child { text-shadow: 1px 1px black, -1px -1px black, 1px -1px black, -1px 1px black; }

h1 text { fill: currentColor }
h1 use {
    stroke: black; 
    stroke-width: 6;
    stroke-linejoin: round;
}

body {
    background: deeppink;
    font: bold 200%/1 Rockwell, serif;
}
 
Paste_Image.png
字体外发光

思路:准备几层重叠的text-shadow,不考虑偏移量,颜色保持跟字体一样。
可以加上过渡效果,使得鼠标悬停时出现效果,transition:1s.

        a {
            padding: .5em;
            line-height:1.5;
            background: #203;
            color: white;
            transition: 1s;
        }
        
        a:hover {
            text-shadow: 0 0 .1em, 0 0 .3em;
        }
Paste_Image.png
Paste_Image.png

如果在hover的时候把字体本身的颜色变成透明,则出现模糊效果

    a:hover {
            color: transparent;
            text-shadow: 0 0 .1em white, 0 0 .3em white;
        }
Paste_Image.png

用滤镜来实现模糊效果

a:hover {
            filter: blur(.1em);
        }
Paste_Image.png

本文整理自《CSS揭秘》

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,639评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,277评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,221评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,474评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,570评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,816评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,957评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,718评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,176评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,511评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,646评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,322评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,934评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,755评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,987评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,358评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,514评论 2 348

推荐阅读更多精彩内容

  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,732评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 2,304评论 0 11
  • 本文为阅读《Head First HTML 与 CSS》的css部分的读书笔记,方便回顾书上的知识,另一篇为Hea...
    兼续阅读 1,813评论 0 17
  • 前男友告诉我,分手要趁早,要学会先下手为强,当我一脸懵逼的面对那些问我你为什么跟xxx分手的“热心人”,我...
    李允可阅读 434评论 0 0