[前端笔记006]CSS布局之字体 -- font

资源

推荐zeal:离线文档查看器 https://zealdocs.org/
推荐w3c:线上文档 https://www.w3school.com.cn/
本笔记参考视频，尚硅谷:BV1XJ411X7Ud
我的笔记：https://gitee.com/plusmile/stackedit-app-data.git
我的CSS文件：https://gitee.com/plusmile/front-code.git

字体相关的样式

color:设置前景色，包括字体和边框颜色等
font-size:整数px，与之有关的是em和rem
font-weight:bold/normal/100-900九个级别,字体加粗效果，没法加粗可以换字体，能加粗说明电脑里有加粗版本的字体
font-style:italic/normal,字体斜体效果
font-family:设置字体族，即字体格式，可选值：
1. serif 衬线字体
2. sans-serif 非衬线字体
3. monospace 等宽字体
4. 上面三个是分类，不是具体的字体样式，但可以当作属性值，具体用哪个由浏览器决定，写字体族的最后一个值时使用
5. 可以指定多个字体，使用逗号隔开，以给出使用的优先级，例如：‘微软雅黑’,‘华文彩云’,‘Courier New’,Courier
简写属性：bold (默认normal) 斜体(默认normal)) font:大小/行高(可选，默认1.33) font-family
上面的大小和字体族必须写最后，前面可以加一些其他属性bold 斜体等
font-face 可以将服务器中的字体直接给用户使用，使用时注意版权，例：

@font-face {font-family: '字体的名字';/* 可以设多个url引入多个格式的相同字体，方便兼容format 告诉浏览器字体的格式，不是必须的 */src: url('服务器中字体的路径') format('字体真正的格式如truetype');
}

图标

字体不会失真，随意换颜色，字体样式文件较小，因此可以将图标制作成字体
常用的图标库有，阿里的iconfont和国外的font awesome，下面用font awesome说明
下载后将CSS和webfonts，移动到项目同一级目录中,引入all.css
使用方法：
1. 给i、span或其他标签加个类，直接通过类名来使用图标字体，类名为 ‘fas/fab 要使用的样式名’，然后就可以用改字体样式的方法改大小和样式等。
  例：<i class="fas fa-bell"></i>
2. 使用伪元素，找到图标代码后使用
  例：li::before{content: '\f1b0';font-family: 'Font Awesome 5 Free';font-weight: 900;}
3. 实体，通过&#x图标编码;的格式使用，注意fas类不可少，例：<i class="fas"></i>

行高 line-height

行高指文字占有的实际行高，包括上下的空白
行高可以指定一个大小(px,em)，也可以设置为一个整数，表示字体大小的倍数，默认1.333
行高会在字体框的上下平均分配，依此来设置垂直居中
还可以用来设置行间距=行高-字体大小
例：div{line-height: 1.5;}

font-size

字体框是文字存在的格子，font-size实际设置了文字框的高度，所以文字一般会比设置的高度小一些

字体对齐

text-align 水平对齐，可选值：
1. left 左侧对齐默认值
2. right 右对齐
3. center 居中对齐
4. justify 两端对齐
vertical-align 垂直对齐
1. baseline 基线对齐，默认值
2. top 与父元素顶部对齐
3. bottom 与父元素底部对齐
4. middle 居中对齐，子元素中线与父元素文字的中线对齐
5. xpx 微调
6. 图片默认是基线对齐，所以可以设置此属性为非baseline来去掉图片最下边的间隙

其他文字样式

text-decoration设置文本修饰，可选值：
1. none 默认值，无样式
2. underline 下划线
3. line-through 删除线
4. overline 上划线
5. 可以设置线的颜色和样式，但IE不支持，例：text-decoration: underline red dotted,设置了红色的点状下划线
white-space 设置网页如何处理空白，可选值：
1. normal 正常
2. nowrap 不换行
3. pre 保留空白，就是有多少个空格显示多少个空格
4. 由此引申出设置文本超出后省略号样式的推荐写法

.box2{width: 100px;/* 下面三个需要组合地写出 */white-space: nowrap;overflow: hidden;/* 文本超出显示为省略号 */text-overflow:ellipsis;background-color: #bfa;
}
<div class="box2">图片默认是基线对齐，所以可以设置此属性为非baseline来去掉图片最下边的间隙 */</div>

[前端笔记006]CSS布局之字体 -- font相关推荐

CSS属性之字体(Font)
CSS属性之字体(Font) font:[ [ "| || ]? [ / ]? ] 复合属性,各属性见下文. 必须同时包含font-size和font-family,且这两个值顺序不能变, ...
Henry前端笔记之 CSS相关
Henry前端笔记之 CSS相关深入理解vertical-align和line-height的基友关系深入理解vertical-align和line-height的基友关系详见:基友理解 px. ...
前端笔记之CSS基础 - 字体和文本样式
目录 1.字体样式 1.1.字体大小 1.2.字体粗细 1.3.文字样式(是否倾斜) 1.4.字体 1.5.层叠性 1.6.字体font相关属性的连写 2.文本样式 2.1.文本缩进 2.2.文本水平 ...
前端笔记(Html+CSS+JS+DOM+网页特效+jQuery+HTML5+CSS3+canvas 标签+web开发重难点+面向对象+AJAX)
第1章Html Html:超级文本标记语言(HyperText Markup Language),在浏览器上运行的一种标记语言. 就是给文本加上含有语义的标签. 接下来应该学习更多具体语义标签: 一. ...
前端之DIV+CSS布局
刚开始学习javaweb,首先定位学习后端,可是随着学习的深入和项目的进行,越来越发现前端知识的欠缺,之前也随着视频看过,随着时间的流逝,具体的应用也随之忘记了. 而现在开始自己练习项目,发现前端知识 ...
前端笔记html+css+vue, 页面布局、定位、字体背景等和一些常用方法
目录弹性布局: 定位: overflow溢出: 表单: vue数据存取: vuex store 全局数据: vux弹窗,软提示,硬提示 ElementUI MessageBox 弹框简单用法背景设 ...
字节青训前端笔记 | 理解CSS
CSS 作为前端技术栈中关键一环,对页面元素及样式呈现起到了直接作用.本节课旨在通过对 CSS 的工作流程及原理.页面中 CSS 使用方法等详细解读,帮助前端新手建立对 CSS 的全面而深刻的认知. ...
CSS学习笔记--Div+Css布局（div+span以及盒模型）
1.DIV与SPAN 1.1简介 1.DIV和SPAN在整个HTML标记中,没有任何意义,他们的存在就是为了应用CSS样式 2.DIV和span的区别在与,span是内联元素,div是块级元素内联元 ...
7、前端开发：CSS知识总结——字体样式
字体设置也是网页设计中的重要组成部分,合适的字体不仅会使页面更加美观,也可以提升用户体验.CSS 中提供了一系列用于设置文本字体样式的属性,比如更改字体,控制字体大小和粗细等等. font-famil ...

[前端笔记006]CSS布局之字体 -- font

资源

字体相关的样式

图标

行高 line-height

font-size

字体对齐

其他文字样式

[前端笔记006]CSS布局之字体 -- font相关推荐

最新文章

热门文章