关于css:fonttext样式

8次阅读

共计 1979 个字符，预计需要花费 5 分钟才能阅读完成。

font-color 字体色彩

font-style 字体款式

       italic 斜体
       normal 失常字体【默认】

font-weight 字体粗细

       bold    粗体
       lighter 更细的字体
       normal  失常字体【默认】100 ~ 900   数值越大，字体越粗
           400 normal
           800 bold

font-size 字体大小

       px
       浏览器的默认字体大小是 16px

line-height 行高

       取值是包裹该字体的元素高度，即可文字垂直居中
       <div style="height:200px; line-height:200px;">123</div>

font-family 字体族

       '微软雅黑'
       'Microsoft YaHei'
       serif 衬线
       sans-serif 没有衬线
       fangsong 政府文件
速写
   font:font-style font-weight font-size fonnt-family；1. 必须蕴含 font-size、font-family
       2. font-style 和 font-weight 必须在 font-size 之前
       3. font-family 必须放在最初

webfont

       @font-face
           1. 下载 ttf 字体文件
           2. 放到绝对应的目录(我的项目的目录)
           3. style 标签中通过 @font-face 引入
               @font-face {
                   font-family: 'myfont';
                   src: url('./ 文件名.ttf');
               }
           4. 在须要字体的中央应用
               div {font-family:'myfont';}

字体图表库 iconfont、fontawesome

            iconfont
                1. 更改图标的大小的时候，要应用 font-size
                2. 选中须要更改的图标时，须要通过类名选中
               
            fontawesome

iconfont:

1. 图标退出我的项目 -> 在线链接中的 fontclass->css 文件内容复制到 VScode 中新建的 css 文件中

2.html 文件 link css 文件，i 标签增加图标 (class=”iconfont 图标类名 ”)

留神：
1. 增加图标，更新整个 css 文件，html 中增加新的 icon
2. 更改图标大小

1. 批改单个 icon -- 类名
.icon-yonghu{font-size:30px;}
2. 批改所有 icon
 .iconfont{font-size:30px;}

fontawesome

www.bootcdn.cn->font-awesome-> 复制 link 标签到 html
class 中批改图标名，大小

text-align 文本在以后元素中的对齐形式

        left
        center
        right
        justify

text-decoration

        underline   下划线
        overline    上划线
        line-through 删除线

text-shadow 文本暗影

        px  x 轴偏移
        px  y 轴偏移
        blur 含糊间隔
        color 色彩
        text-shadow:10px 10px 2px red

text-transform 文本变形

        lowercase   小写
        uppercase   大写
        capitalize  首字母大写

text-indent 首行缩进

        2em 2%

    list-style:none; 将 li 标签的默认的款式打消

文字的程度垂直居中

       程度:text-align:center;
       垂直:line-height: 父元素的高度;

打消 a 标签的默认款式

   color:#333;
   text-decoration:none;
   cursor:default;
       pointer -- a 标签默认
       wait
       help

子元素在父元素中程度垂直居中

   父元素：display:table-cell;
   vertical-align: middle;
   align-items: center;
   子元素
   display:inline-block;

1) 色彩

1. 关键字
    red、yellow...
    color:red;
2. 十六进制色彩
    color:#333333 ==> color:#333;
3. rgb 函数
    r red
    g green
    b blue
    color:rgb(0,0,0);
    0 ~ 255
4. rgba 函数
    r red
    g green
    b blue
    a 色彩透明度
    color:rgba(0,0,0,0.5);
    0 ~ 255 / 0 ~ 1
*** opacity 与 rgba 函数的区别 ***
    opacity 父元素的透明度会影响到子元素，且子元素无奈设置为失常透明度
    rgba 函数 透明度仅仅会作用于父元素，不会影响子元素
5. 渐变色
    background-image: linear-gradient(to right,red,yellow);
    从左向右，从红色突变到黄色

2) 长度

相对单位  px
绝对单位  em  
        以后文本的包裹元素上的 font-size
        <div style='font-size:18px;'>123321</div>
        1em = 18px
        2em = 36px;
    %   绝对于父元素
    rem   绝对于根元素 html

正文完