美文网首页
CSS3 文字与字体相关样式

CSS3 文字与字体相关样式

作者: 兔子不打地鼠打代码 | 来源:发表于2018-01-18 21:22 被阅读7次

    一、给文字添加阴影

    语法:
    length1—阴影离开文字横向方向的距离
    length2—阴影离开文字纵向方向的距离
    length3—模糊程度
    color—阴影颜色

    text-shadow:length1 length2 length3 color
    

    实例

    div{
        text-shadow: 5px 5px 5px blue;
        color: grey;
        font-size: 25px;
        font-weight: 200;
    }
    

    二、使用服务器端字体

    语法:
    normal—使用浏览器的默认换行规则
    keep-all—只能在半角空格或连字符处进行换行
    break-all—允许在单词间进行换行
    实例:
    如何在服务端使用上传的字体

    @font-face{
        font-family: WebFont;
        src: url("字体安装包.ttf/otf")format("truetype/opentype");
        font-weight: normal;
    }
    
    div.page{
        font-family: WebFont;
    }
    

    三、修改字体种类而保持字体尺寸不变

    字体样式不同会导致同一字码的字体显示出来的大小不一样,因此css3增加了font-size-adjust 属性。

    实例:

    #div1{
         font-family: Menlo;
         font-size: 16px;
        font-size-adjust: 0.60;
    }
    
    • 如何计算font-size-adjust:aspect中asipect的值?
      aspect = chracter's high / font-size
    • 如何得知浏览器实际显示的字体大小?
      通过公式c= (a/b)s
      c:浏览器实际显示的字体尺寸
      a: 实际使用的aspect字体的值
      b: 修改前,字体aspect值
      s:当前字体的尺寸

    相关文章

      网友评论

          本文标题:CSS3 文字与字体相关样式

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