作者:花森
时间:2020年8月11日
认识
一般情况下操作系统会存在于系统中,浏览器会根据你网页设定的字体依次查找,找到匹配到后将展示,不在向后查找,例如你的电脑有宋体
存在,在网页就会显示宋体,但其他用户中无次字体,所以造成其他用户使用是不会显示宋体字体。
<style>
* {
font-family: 'Courier New', Courier, monospace;
}
</style>
...
<div>花森导航</div>
文本基础
自定义字体
声明自定义字体名称,如果客户端不存在将下载该字体,使用方式也是通过 font-family
引入。很多字体都是有版权的,商用要注意,我导航也有免费商用的网站。
字体 | 格式 |
---|---|
.otf | opentype |
.woff | woff |
.ttf | truetype |
.eot | Embedded-opentype |
<style>
@font-face {
font-family: "自定义字体名";
src: url("./SourceHanSansSC-Light.otf") format("opentype"),
url("./SourceHanSansSC-Heavy.otf") format("opentype");
}
span {
font-family: '自定义字体名';
}
</style>
字重定义
字重指字的粗细定义,取值范围 normal | bold | bolder | lighter | 100 ~900
。400对应 normal
,700对应 bold
,一般情况下使用 bold 或 normal 较多。
font-weight: normal;
文本字号
字号用于控制字符的显示大小,包括 xx-small | x-small | small | meidum | large | x-large | xx-large
。
单位百分数
百分数是子元素相对于父元素的大小,如父元素是20px,子元素设置为 200%即为你元素的两倍大小。
<style>
article {
font-size: 20px;
}
span {
font-size: 500%;
}
</style>
...
<article>
<span>huasen</span>
</article>
单位em
相当于父元素的大小,若父元素的字体大小为16px,子元素的字体设置为0.75,正常继承下子元素的字体大小为16*0.75=12px。正常情况下1em=16px。
<style>
article {
font-size: 16px;
}
span {
font-size: 0.75em;
}
</style>
...
<article>
<span>huasen.top</span>
</article>
文本颜色
1)字符串颜色
可以使用如 red | green
等字符颜色声明
color:red;
2)16进制网页颜色
#
开头的6位16进制码能表示的色域更大
color:#ddffde
3)RGB
红绿蓝3个三位数数字表示
color:rgb(38, 149, 162);
4)RGBA透明颜色
重点是A的值是0-1是透明到不透明
color:rgba(38, 149, 162,0.2);
行高定义
父元素固定高度后,设置line-height等于父元素的宽高时,行内元素以及文字会垂直居中。
div {
width: 100px;
height: 100px;
background-color: gold;
line-height: 100px;
}
<div>
花森
</div>
字体倾斜
<style>
span {
font-style: italic;
}
em {
font-style: normal;
}
</style>
...
<span>huasenjio</span>
<hr>
<em>huasenjio</em>
文本样式
大小写转化
通过样式实现小写字母转大写字母
span {
font-variant: small-caps;
}
...
<span>huasen.top</span>
<style>
h2 {
/* 首字母大小 */
text-transform: capitalize;
/* 全部大小 */
text-transform: uppercase;
/* 全部小写 */
text-transform: lowercase;
}
</style>
文本线条装饰
为文本添加线条装饰,例如:下划线,斜杠等效果。
a {
text-decoration: none;
}
span.underline {
text-decoration: underline;
}
span.through {
text-decoration: line-through;
}
span.overline {
text-decoration: overline;
}
...
<a href="">huasen</a>
<hr>
<span class="underline">下划线</span>
<hr>
<span class="through">删除线</span>
<hr>
<span class="overline">上划线</span>
文本阴影(*)
为文本提供阴影效果,参数顺序分别为:颜色,水平X轴偏移,垂直Y轴偏移,模糊度。
<style>
h2 {
text-shadow: rgba(13, 6, 89, 0.8) 3px 3px 5px;
}
</style>
...
<h2>huasenjio</h2>
空白处理(*)
选项 | 说明 |
---|---|
pre | 保持字符串原有模样(类似使用 pre 标签) |
nowrap | 禁止文本换行(打死都不换行) |
pre-wrap | 保留空白且保留换行符(不常用) |
pre-line | 空白合并且保留换行符w(不常用) |
文本溢出(*)
文本溢出的前提是元素需要固定的宽度
单行溢出处理
溢出添加 ...
,需要将overflow 设置在 text-overflow 前面。
h2 {
width: 100px;
border: solid 1px #ddd;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
<h2>huasenjio</h2>
多行溢出处理(WebKit内核浏览器)
<style>
h2 {
display: -webkit-box;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-all;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
</style>
<!--缩小浏览器窗口查看效果-->
<h2>huasenjio.tophuasenjio.tophuasenjio.tophuasenjio.tophuasenjio.top</h2>
段落控制
文本缩进
p {
text-indent: 2em;
}
文本对齐
1)水平对齐
h2 {
text-align: center;
}
2)文章内容的段落样式好,能起到先心悦目的作用。
p {
text-indent: 2em;
line-height: 2em;
}
...
<p>
脑子还依旧很清晰地记得,我刚转入计算机专业时稚嫩的样子,那时多么想拥有一个自己的笔录,记录着自己的点滴。因为个人比较喜欢打王者荣耀,耽误了很多时间,正如年年岁岁花相似,岁岁年年人不同。只道是不悔梦归处,只恨太匆匆。我的心里很是感慨, 没有退路,让我想起一句话,没有伞的孩子,只能向前奔跑。
</p>
垂直对齐
使用 vertical-align
用于定义内容的垂直对齐风格,包括middle | baseline | sub | super
等。
<style>
img {
height: 50px;
width: 50px;
vertical-align: middle;
}
</style>
<p>
<img src="houdunren.jpg" />
huasenjio
</p>
1)顶部与底部对齐
bottom | top
相对于行框底部或顶部对齐
h2>span {
vertical-align: bottom;
font-size: 12px;
}
<h2>花森酱<span>huasenjio</span></h2>
2)使用单位对齐
可以使用具体数值设置对齐的位置
h2>span {
vertical-align: -20px;
font-size: 12px;
}
<h2>花森酱<span>huasenjio</span></h2>
字符间隔
使用 word-spacing
与 letter-spacing
控制单词与字答间距
h2 {
word-spacing: 2em;
letter-spacing: 3em;
}
<h2>花森酱<span>huasenjio</span></h2>
排版模式
模式 | 说明 |
---|---|
horizontal-tb | 水平方向自上而下的书写方式 |
vertical-rl | 垂直方向自右而左的书写方式 |
vertical-lr | 垂直方向内内容从上到下且水平方向从左到右 |
div {
height: 200px;
border: solid 1px #ddd;
writing-mode: vertical-rl;
}
<h2>花森酱<span>huasenjio</span></h2>