字体

属性	属性值	作用	备注	继承性
font-family	字体名 集体集	设置字体	/	√
font-style	normal 默认 italic 斜体 oblique 倾斜	设置字体的斜体	很多浏览器不区分两种倾斜方式 只用italic即可	√
font-size	px em	设置字体大小	/	√
font-weight	normal 默认 100-900 bold常用	字体加粗	不一定全都有不同效果 400相当于normal 700=bold	√
font-variant	normal 不变 small-caps	小写字母转小型大写字母	/	√

字体 font-family

说明：
font-family属性值：字体名1,字体名2....，备选字体集;
  -含空格字体名和中文，用英文引号引用
  -多个字体，用英文逗号隔开
  -设置多个字体，浏览器依次查找，都没有，则选用字体集,还是没有就使用浏览器默认样式。
  -常用的字体集可能就是serif和sans-serif
<style type="text/css">
p{
    font-family:"arial","microsoft yahei","宋体",serif;
}
</style>

font简写顺序

font: italic small-caps bold 16px/50px '微软雅黑','宋体',serif;

https://img.haomeiwen.com/i6684438/26036a5618296969.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240

---

文本样式

属性	属性值	作用	备注	继承性
text-align	left center right justify两端对齐	水平对齐方式	只能为块级盒子使用 使内部元素 文字,行内,行内块元素(img,input等)对齐	√
vertical-align	/	垂直对齐方式	使文字,行内块元素(img,input,单元格等)对齐	×
line-height	number em 百分比 px	设置基线与基线的距离	number em 百分比根据自身字体大小计算 如果祖先元素设置的是em % 那么继承的是最终计算的值而不是em %	√
text-indent	em px	设置首行缩进	正值右侧缩进 负值向左移动 -9999px可以将不想显示的文字隐藏起来	√
letter-spacing	em px	可以指定字符间距	/	√
word-spacing	em px	设置词与词之间空格的大小	/	√
text-transform	none 默认值 capitalize 首字母大写 uppercase 大写 lowercase 小写	设置大小写转换	/	√
text-decoration	none默认值 underline 下划线 overline 上划线 line-through 删除线	设置文本的修饰	/	×
color	颜色名称 16进制 rgb()	/	/	√

vertical-align

大部分取值是相对于父元素来说的：
       baseline 默认值
           元素基线与父元素的基线(所在行框)对齐。
           对于一些 可替换元素，比如 <textarea> ， HTML标准没有说明它的基线，这意味着对其使用这个关键字，各浏览器表现可能不一样。一般情况下如果元素没有基线baseline，则以它的外边距的下边缘为基线。
       text-top
           元素顶端与父元素字体的顶线对齐。
       text-bottom
           元素底端与父元素字体的底线对齐。
       middle
           元素中线与父元素的中线对齐。
       sub `类似下标效果`
           元素基线与父元素的下标基线对齐。（使元素的基线相对于基准基线下降，下降的幅度有浏览器厂商决定）
       super `类似上标效果`
           元素基线与父元素的上标基线对齐。（使元素的基线相对于基准基线升高，升高的幅度有浏览器厂商决定）
       <length> px 等单位
           元素基线在父元素的基线的上移或下移指定。正值向上 负值向下。
       <percentage>
           同 <length> , 百分比相对于 line-height 。
    以下两个值是相对于整行来说的：
       top
           元素的顶端与行内最高元素的顶端对齐。
       bottom
           元素的底端与最低元素的底端对齐。

QQ图片20191217010917.png

css3文本样式

text-shadow: 5px 5px 5px red; //垂直偏移 模糊距离 颜色 [应用于阴影文本 ,可指定多层阴影,IE10+兼容]
word-break : --中文不建议使用keep-all属性，将出现无法调整的情况。
            normal    正常左边对齐
            break-all 表示只要到该换行的地方都换行（强制换行）
            keep-all  表示在半角空格或连字符地方换行。（与normall效果差不多）
            
word-wrap: [设置长单词，URL地址是换行还是 不换行溢出。对中文无效]
            normal( 溢出不换行 默认值)
            break-word( 换行) 
text-align-last:  
            auto：自动，默认，向左边对齐
            left：强制左对齐
            right：强制右对齐
            center：居中对齐
            justify：两端对齐
            start：与主流对齐方式相同
            end：与主流对齐方式相反
            initial：默认值是什么就是什么
            inherit：继承父级元素的对齐方式
text-overflow: 
            ellipsis(文本溢出显示...省略号 ) 
            clip(只裁剪不显示省略号)

文本溢出显示省略号

white-space: nowrap(强制文本同一行显示);

text-overflow: ellipsis;

overflow: hidden;

display:block || inline-block;//必须是块级和行内块元素 因为行内元素是由内容撑开

CSS3字体 图标

第一步：拷贝项目下面生成的font-face
@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}
第二步：定义使用iconfont的样式
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
第三步：挑选相应图标并获取字体编码，应用于页面
<i class="iconfont">&#x33;</i>
<i class="iconfont icon-xxx"></i>

获取特殊字体的网站：
www.fontsquirrel.com