美文网首页
CSS3字体属性

CSS3字体属性

作者: 秋枫残红 | 来源:发表于2017-11-07 19:24 被阅读0次

    text-shadow:length-x,length-y,radius,color

    • 设置文字阴影,第三个参数为模糊半径

    word-break:normal/keep-all/break-all

    • 设置文本自动换行
    • 第一个参数表示默认方式,英文在空格或连词符处换行,中文随时换行,单标点不可位于行首
    • 第二个参数表示只在半角空格或连词符处换行
    • 第三个参数表示强制随时换行

    word-warp:normal/break-world

    • 表示长单词或URL的换行
    • 具体参考上一条

    定义服务端字体

    基本用法
    @font-face{
    font-family:WebFont;
    src:url('...') format('...');
    }
    h1{
     font-familt:WebFont;
    }
    
    • 上面的WebFont用于声明使用服务端字体,src为字体路径,format为字体格式
    服务器端字体的粗体与斜体
    • 在使用服务器端字体时无法直接通过font-style将字体定义为粗提或斜体必须使用@font-face提前引入,举个栗子
    @font-face{
            font-family:WebFont;
            font-width:bold;
            src:url('...') format('...');
    }
    @font-face{
            font-family:WebFont;
            font-style:italic;
            src:url('...') format('...');
    }
    
    @font-face{
            font-family:WebFont;
            font-width:bold;
            font-style:italic;
          src:url('...') format('...');
    }
    
    • 在引入时会通过字体样式匹配这三种样式
    显示本地字体
    @font-face{
            font-family:Arial;
            src:local('...');
    }
    
    • 其好处是在渲染界面时会先在本地字体查找,未找到则使用服务端字体
    @font-face的属性
    属性名 说明 取值范围
    font-family 设置字体系列
    font-style 设置字体样式 normal:不使用斜体
    italic:使用斜体
    oblique:使用倾斜体
    inherit:从父元素继承
    font-variant 设置字体大小写 normal:使用浏览器默认值
    small-caps:使用小型大写字母
    inherit:从父元素继承
    font-weight 设置字体的粗细 normal:使用浏览器默认值
    bold:使用粗体字符
    bolder:使用更粗的字符
    lighter:使用更细的字符
    100~900:自己设置值,400等于normal,700等于bold
    font-stretch 设置字体是否伸缩变形 不想写了
    font-size 设置字体大小
    src 设置字体路径

    font-size-adjust

    • 由于改变字体会影响字体大小(即使设置大小,也会因字体种类的不同而不一样)
    • 我们知道的是每个字体都有一个aspect值为常量,计算方法为x-height/font-size,x-height指该字体写出的小写x的高度。这个方法就是通过微调各个字体的aspect值来达到字体大小一致的目的,至于aspect值,可通过......
      百度获得

    相关文章

      网友评论

          本文标题:CSS3字体属性

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