美文网首页
15、@font face、font怎么设置

15、@font face、font怎么设置

作者: 小黄不头秃 | 来源:发表于2022-06-02 00:33 被阅读0次

    @font face

    @font-face:可以将服务器中的字体直接提供给用户

    <style>
            @font-face{
                /* 指定字体名称 */
                font-family:"my-font";
                /* 在服务器中的位置 */
                src: url('');
            }
        </style>
    

    font 相关字体的样式:

    语法:font:字体大小/行高 字体族

    • color 字体颜色;

    • font-size 相关单位;

    • em相当于当前元素的一个font-size

    • rem相当于根元素的一个font-size

    • font-family 字体族(字体的格式)
      可选值:
      serif 衬线字体
      sans-serif 非衬线字体
      monospace等宽字体
      可以指定多个字体,优先级依次递减;

    • font-weight字重,字体加粗
      可选值:
      - normal 默认值 不加粗
      - bold 加粗
      - 100-900 九个级别(基本没什么用)

    • font-style 字体风格
      - normal 默认字体,正常
      - italic 斜体

    • text-align:文本的水平对齐
      可选值:
      - left 左对齐
      - right右对齐
      - middle居中对齐
      - justify 两端对齐

    • vertical-align 设置元素垂直对齐方式
      可选值:
      baseline 基线对齐
      top顶部对齐
      bottom底部对齐
      middle中部对齐

    • text-decoration 设置文本修饰
      可选值
      none 默认值
      underline下划线
      line-through 删除线
      overline上划线

    • white-space设置空白处理
      可选值:
      normal:正常值
      nowrap:不换行
      pre:保留空白

    <style>
            p{
                color: red;
                font-size: 60px;
                font-family: Courier,serif;
                line-height: 2;
                font-weight: bolder;
                text-align: center;
                border: blue 1px solid;
                text-decoration: underline;
            }
        </style>
    

    相关文章

      网友评论

          本文标题:15、@font face、font怎么设置

          本文链接:https://www.haomeiwen.com/subject/rsyzprtx.html