美文网首页
CSS文本样式

CSS文本样式

作者: 勿以浮沙筑高台 | 来源:发表于2016-09-13 13:47 被阅读6次

    CSS提供了几个属性来操作字体。
    font,可以很方便的指定字体的属性。比如:

    • 字体加粗,字体的风格:斜体和字体变形:小写和大写字母
    • 字体的大小
    • 行高
    • 字体
    eg1:######
    p {font: italic 75%/125% "Comic Sans MS", cursive;}```
    这条规则定义了字体的几个属性,使整个段落文本都变成斜体。
    字体大小设置为每个段落父元素字体大小的3/4,行高设置为125%(比常规的间隔稍大一些)。
    文本字体设置为 Comic Sans MS,假如该字体不被浏览器支持则使用默认字体:cursive。
    这条规则还把bold和small-caps这些效果给去掉了(设置它们的值为normal)。
    
    ######字体######使用 
    font-family 属性指定文本的字体。
    
    简体中文的字体示例:
    Windows:```font-family:微软雅黑;```
    Mac OS:```font-family:"Songti SC";```
    
    ######字号######
    使用font-size 属性指定字体的大小。浏览器用户浏览页面时,可以覆盖页面默认的文号大小,也可以改变页面的字号大小。所以说尽可能的使用相对的字号大小对你来说是有意义的。
    
    你可使用系统内置的值来设置字号,比如small,medium和large。你也可以使用相对父元素字号大小的值来设置,比如:smaller,larger,150%或1.5em。1“em”等于1个字母“m”的宽度(相对于父元素字号大小);因此1.5em就是1.5倍的父元素字号大小。
    
    如果有必要你也可以指定一个实际的大小,比如14px(14像素)应用于显示设备或14pt(14点)应用于打印设备。但是实际大小不能应用于视力受损用户的设备上,因为这些设备不支持指定实际的值。一个比较容易实现的策略是给顶级的文档元素指定一个系统内置的值如medium,然后再给它的子元素设置个相对值。
    
    ######行高######
    使用 line-height 属性指定文本的行间距。
    
    行高用来指定行与行之间的距离。如果你的文档中有一个很长的段落由很多行组成,而且这个段落的字号还比较小,这时给它指定一个稍大的间距,这样阅读起来会更方便
    
    ######文本装饰######
    单独的 text-decoration就可以为文本指定其他风格,比如underline或line-through。你也可以把值设置成none,把这些风格取消掉。
    
    ######其他属性######
    使用font-style: italic;指定文本为斜体;
    使用 font-weight: bold;指定文本加粗;
    使用 font-variant: small-caps;指定文本为小型大写字母;
    如果我们想单独设置某个效果失效,我们可以把其相应的属性设置为normal或inherit.
    
    **PS: 在一个复杂的样式表中,应该避免使用font属性,因为它的副作用(重置其他个体属性)。**

    相关文章

      网友评论

          本文标题:CSS文本样式

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