字体、图标字体、行高、文本样式（css）

字体相关的样式

color 用来设置字体颜色

font-size (字体大小)	相关单位
`em`	相当于当前元素的一个font-size
`rem`	相当于根元素的一个font-size

font-family	字体族（字体的格式）
`serif`	衬线字体
`sans-serif`	非衬线字体
`monospace`	等宽字体
指字体的类别	浏览器会自动使用该类别下的字体

font-family 可以同时指定多个字体，多个字体间使用时，隔开；字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推

        /* font-foce 可以将服务器中的字体直接提供给用户去使用 问题：1.加载速度2.版权3.字体格式*/@font-face {/* 指定字体的名字 */
            font-family: "myfont";/* 服务器中字体的路径   */
            src: url("");}

图标字体（iconfont）

使用图标时，可以将图标设置为字体，通过 font-face 的形式来使用图标，然后通过使用字体的形式来使用图标

font awesome使用步骤

下载 font awesome（阿里的字体库）
解压
将 css 和 webfonts 移动到项目中
将 all.css 引入到网页中
使用图标字体
- 直接通过类名来使用图标字体
class= "fas fa-bell"
class ="fab fa-accessible-icon"

通过伪元素来设置图标字体

找到要设置图标的元素通过 before 或 after 选中
在 content 中设置字体的编码
设置字体的样式
- fab:
font-family: 'Font Awesome 5 Brands';
- fas
font-family: 'Font Awesome 5 Free';
font-weight: 900;

通过实体来使用图标字体

&#x图标的编码;

<span class="fas">&#xf0f3</span>

行高（line height）

行高指的是文字占有的实际高度
可以通过line-height 来设置
- 行高可以指定一个大小（px em）
- 也可以直接为行高设置一个整数（如果是整数的话，行高将会是字体的指定的倍数）
行高经常还用来设置文字的行间距
- 行间距 = 行高 - 字体大小；

字体框

字体框就是字体存在的格子，设置font-size 实际上就是在设置字体框的高度
行高会在字体框的上下平均分配

字体的简写属性

font 可以设置字体相关的所有属性；

font: bold italic 50px/2 微软雅黑, ‘Times New Roman', Times, serif;

语法：
- font：字体大小/行高字体族；
- 行高可以省略不写，如果不写视为使用默认值

font-weight 自重字体的加粗

normal 默认值不加粗
bold 加粗

font-style 字体的风格

normal 正常的
italic 斜体

文本的样式

text-align	文本的水平对齐
letf	左对齐
right	右对齐
center	居中对齐
justify	两端对齐

vertical-align	设置元素垂直对齐的方式
baseline	(默认值) 基线对齐
top	顶部对齐
bottom	底部对齐
middle	居中对齐

text-decoration	设置文本修饰
none	什么都没有
underline	下划线
line-through	删除线
overline	上划线

white-space	设置网页如何处理空白
normal	正常
nowrap	不换行
pre	保留空白

        /* 单行省略号 */.box{            width: 200px;
            white-space: nowrap;
            overflow: hidden;/* 显示不换行省略号 */
            text-overflow: ellipsis;}

字体、图标字体、行高、文本样式（css）相关推荐

CSS精灵图、字体图标、三角、鼠标样式、用户界面样式、溢出省略号
[CSS精灵图.字体图标.三角.鼠标样式.用户界面样式.溢出省略号] 本文档是个人对 Pink 老师课程的总结归纳及补充,转载请注明出处! 一.精灵图 1.1 为什么需要精灵图? 一个网页中往往会应用 ...
字体图标的使用（HTML、CSS）
字体图标的使用(HTML.CSS) <!DOCTYPE html> <html lang="en"><head><meta charset ...
字体大小，行高，高度
ie6下,font-size 等于 line-height 时,字体受行高限制,显示不全. 如图: 所以应该将行高设置为大于字体值2px,切记不要这样写font:12px/12px,要12px/14 ...
html中高与行高的区别,CSS中line-height与height有什么区别
line-height--行高属性,设置文本模式上下距中伤隔. height--高度属性,设置装备摆设对象高度剖析图从上图我们就能够形象中的line-height与height判别: 1.违抗分歧 ...
easyexcel 列宽、行高、样式
easyexcel 列宽.行高.样式 ********************** 相关注解 HeadRowHeight:标注在类上 @Target({ElementType.TYPE}) @Rete ...
CSS技巧之精灵图/字体图标/画三角/用户页面样式/vertical-align
15. 常见技巧 15.1 精灵图出现原因一个网页往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁接受和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度. ...
深入剖析 CSS：字体度量、行高和垂直对齐
Line-height 并且是简单的 CSS 属性.如此简单,以至于我们大多数人都相信要完全理解它们的工作原理以及如何使用它们.但事实并非如此.它们真的很复杂,也许是最难的,因为它们在创建CSS鲜为人 ...
html里面行高的原理,CSS行高（line-height）及文本垂直居中原理
在CS多现业讲进行效通近年有务这行定果过近年有S中,line-height 属性设置两段段文本之间的距离,也就是行高,如果我们把一段文本的line-height设置为父容器的高度就可以实现文本垂直居中 ...
html行间距1.8em,雅黑字体下WordPress 行高与字符间距最佳实践：1.8em与0.06em
最近看一下网站的流量统计,发现有几个关键词是一直有很多流量进来的,一个是Win8操作系统的BCD启动项修复解决方案,一个是WordPress程序修改行间距.段落间距的办法.看来WordPress新入门 ...
CKEditor 修改编辑器字体大小和行高
CKEDITOR现在用的很流行,那如何将编辑器内文字默认修改为14px?(默认12px,对中文显示不太好看,有点小小的!) 分两部分进行操作: 1)可视化编辑里默认字体大小:修改根目录下content ...

字体、图标字体、行高、文本样式（css）

字体、图标字体、行高、文本样式（css）

字体相关的样式

图标字体（iconfont）

行高（line height）

文本的样式

字体、图标字体、行高、文本样式（css）相关推荐

最新文章

热门文章