• CSS字体属性


    font-family

    body {
      font-family: "Helvetica Neue", Helvetica, "Hiragino Sans GB", "Microsoft Yahei", tahoma, "WenQuanYi Micro Hei"
    }
    

    该属性定义文本使用哪种字体,字体相关的属性都是有继承性的,所以通常只需要为body元素设置font-family。上面的代码中写了很多字体,这是为了保证一种回退机制,如果用户的电脑根本没有第一种字体或者浏览器不支持第一种字体,那么浏览器就会使用第二种字体,以此类推直到找到一个支持的字体。多种字体之间用逗号分隔,如果某种字体它是有空格的,如Helvetica Neue就需要用引号包裹,其他的如tahoma就不需要引号包裹。如果字体中有英文字体,一定要放到最前面,英文字体会影响数字和标点符号。

    font-size

    font-size设置字体的大小。chrome的最小字体为12px,所以小于12px的字体默认会以12px字体显示。我写了一个小例子:

    文字的大小默认是medium,可选关键字xx-small,x-small,small,medium,large,x-large,xx-large,我通常很少用他们,除了这些还可以是smaller, 它表示设置为比父元素更小的尺寸,larger比父元素更大的尺寸。用的较多的是CSS长度单位,还可以用百分比表示,百分比是基于父元素的文字大小。

    font-style

    定义文本的风格。默认值normal表示正常显示,italic斜体风格,oblique倾斜的字体。我试了下italic和oblique在效果上几乎没差别,但是细微之处,italic表示斜体,然而并不是所有的文本都有斜体的,没有斜体变量的特殊字体会应用oblique,即把字体倾斜一个角度,这样看起来它也是斜体了,oblique就是把字体倾斜一个角度。

    font-variant

    Hello World

    Hello World

    <p style="font-variant: normal">Hello World<p>
    <p style="font-variant: small-caps">Hello World<p>
    

    用于把小写字母转换为小型的大写字母显示。默认值normal,可以是small-caps

    font-weight

    定义文本的粗细,默认值normal。属性值bold定义粗体。bolder定义更粗的文本,它是相当于父元素的字体粗细,如果父元素是normal,那么bolder和bold是一样粗的。lighter定义更细的字体,同样是相对于父元素。属性值还可以是数值100,200,300,400,500,600,700,800,900中的一个,400等于normal,700等于bold。

    font-face

    这个属性略复杂,简单来说它可以让我们在网页开放中使用自定义字体,常用属性font-family, src, font-weight, font-style

    font-family

    定义字体的名字

    src

    定义字体的路径,拿我经常用的iconfont字体图标举例:

    @font-face {
      font-family: "iconfont";
      src: url('iconfont.eot'); /* IE9*/
      src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
      url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
      url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
    }
    
      
    .iconfont {
      font-family:"iconfont" !important;
      font-size:16px;
      font-style:normal;
      // 保证字体图标的平滑
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    

    不同后缀的文件是为了兼容更多的浏览器,url属性指定字体的路径,相对路径、绝对路径或外链都可以。format属性指的是字体的格式,值可以是truetype, opentype, truetype-aat, embedded-opentype, svg,主要用于帮助浏览器识别字体。另外还可以用local加载本地的字体,这样就避免去服务器请求资源,当然用户本地要有这种字体才可以,使用方法如下:

    @font-face {
      font-family: "iconfont";
      src: local('Microsoft Yahei'),local('HelveticaNeue-Light');
    }
    

    font-weight

    这个属性是为了确保在使用font-weight时,能以我们定义的字体来显示加粗的字体,因为一套字体很可能有多个版本,每个版本对应一种粗细,例如:

    // normal
    @font-face {
    font-family: 'QH';
    font-weight: 400;
    src: local('HYQIhei 40s')
    }
    // weight: 500
    @font-face {
      font-family: 'QH';
      font-weight: 500;
      src: local('HYQihei 50S');
    }
    
    .p1 {
      font-family: 'QH';
      font-weight: 400;
    }
    .p2 {
      font-family: 'QH';
      font-weight: 500;
    }
    <p class="p1">Hello World</p>
    <p class="p2">Hello World</p>
    

    font-style

    font-style定义不同风格的字体,由于不是每种字体都有斜体的,所以一套字体,我们可能需要准备两种,一种是正常的(normal),一种是斜体(italic),我们就可以这样使用:

    @font-face {
    font-family: 'BASE';
    font-style: normal;
    src: local('BASE normal')
    }
    
    @font-face {
      font-family: 'BASE';
      font-style: italic;
      src: local('BASE italic');
    }
    
    .p1 {
      font-family: 'BASE';
      font-style: normal;
    }
    .p2 {
      font-family: 'BASE';
      font-style: italic;
    }
    <p class="p1">Hello World</p>
    <p class="p2">Hello World</p>
    

    知识扩展

    css通用字体系列一共五种,理论上讲用户安装的任何字体都会是其中的一种,这五种字体分别是:

    Serif字体

    衬线字体是比例的,并且有上下短线,例如Times, Georgia

    Sans-serif字体

    无衬线字体也是成比例的,它没有上下短线,例如Helvetica, Geneva, Verdana, Arial,我平常用无衬线字体较多,下面一张图直观表现什么是衬线:

    Monospace等宽字体

    等宽字体非等比例字体,通常定义计算机代码、打印机文本会使用这种字体。由于是等宽的,所以字母i和m宽度相同,常见的字体有Courier, Courier New, Andale Mono

    Cursive字体

    模仿人的手写体。常见的有Author, Comic Sans

    Fantasy 字体

    这些字体无法用任何特征定义,不属于以上四种字体的都属于Fantasy字体,网上很多奇特的艺术字属于这种字体

    各平台常用字体

    参考文章
    Win平台字体
    Microsoft Yahei: Win默认的无衬线黑体类字体;
    Tahoma: 一种常用的无衬线字体;
    SimSun: 宋体,不适合大号文字;
    Arial: 一种常用的无衬线西文字体(西文即英文字体);

    Mac ios平台字体
    Helvetica Neue, Helvetica: 一种常用的无衬线西文字体;
    HeiTi SC: Mac默认的无衬线黑体类字体;
    Hiragino Sans GB: 冬青黑体一种常用的无衬线字体;

    Android
    Droid Sans: 安卓系统默认无衬线西文字体;

    Linux平台字体
    WenQuanYi Micro Hei: 文泉驿微米黑为Liunx系统下推荐字体;

    优秀文章首发于聚享小站,欢迎关注!
  • 相关阅读:
    jquery小知识点
    jQuery 插件开发(1)
    js闭包实际用途
    javascript中的闭包
    Asp.Net Mvc: 浅析TempData机制
    WebService 简单应用
    SQLServer中游标实例介绍(转)
    使用jQuery Ajax功能的时候需要注意的一个问题
    Asp.Net中判断是否登录,及是否有权限?
    Asp.net MVC3中全局图片防盗链
  • 原文地址:https://www.cnblogs.com/yesyes/p/15356384.html
Copyright © 2020-2023  润新知