【CSS】学习iview的icon样式+font字体

A. 工程中引入样式文件

• iview源码工程中的example工程中如何引入iview样式

• 自定义工程中如何引入iview样式

一般在src/main.js中引入（在index.html中也可以，当然app.vue中也可以）

import "iview/dist/styles/iview.css"

B. icon样式

本文主要来看看，是如何通过 src/styles/index.less 一层层引入 icon 对应的样式的

① src/styles/index.less
② src/styles/common/index.less
③ src/styles/common/iconfont/ionicons.less

引入字体文件： _ionicons-font.less

@font-face {
    font-family: @ionicons-font-family;
    src: url("@{ionicons-font-path}/ionicons.woff2?v=@{ionicons-version}") format("woff2"),
         url("@{ionicons-font-path}/ionicons.woff?v=@{ionicons-version}") format("woff"),
         url("@{ionicons-font-path}/ionicons.ttf?v=@{ionicons-version}") format("truetype"),
         url("@{ionicons-font-path}/ionicons.svg?v=@{ionicons-version}#Ionicons") format("svg");
    font-weight: normal;
    font-style: normal;
}

.ivu-icon() {
    display: inline-block;
    font-family: @ionicons-font-family;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    text-rendering: auto;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    vertical-align: middle;
}

.ivu-icon {
    .ivu-icon();
}

将字体整合成样式：_ionicons-icons.less

C. icon组件是怎么定义的

<i :class="classes" :style="styles" @click="handleClick"></i>

const prefixCls = 'ivu-icon';

computed: {
  classes () {
    return [
      `${prefixCls}`,
      {
         [`${prefixCls}-${this.type}`]: this.type !== '',
         [`${this.custom}`]: this.custom !== '',
       }
   ];
  },     
}    

D. 至于为啥小图标icon都用标签<i>

自行搜索答案吧！

E. inline、block和inline-block的区别

block

• 每个块级元素都从新的一行开始，并且其后的元素也另起一行。（很霸道，一个块级元素独占一行）
• 元素的高度、宽度、行高以及顶和底边距都可设置。
• 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

inline

• 和其他元素都在一行上；
• 元素的高度、宽度及顶部和底部边距不可设置；
• 元素的宽度就是它包含的文字或图片的宽度，不可改变。

inline-block：同时具备inline、block的特点。

• 和其他元素都在一行上；
• 元素的高度、宽度、行高以及顶和底边距都可设置。

F.@font-face

F1. CSS3 @font-face 规则

指定名为myFirstFont的字体，并指定在哪里可以找到它的URL(可以多个地址，以逗号分隔)：

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */
//src:  url('font.woff') format('woff');
/**format
可选值，表示给加载的外部字体指定字体格式，
用来告诉浏览器让浏览器能够识别所使用的字体格式，
可用的类型有 
embedded-opentype , truetype , opentype , woff , woff2 , svg。
分别对应上边我们介绍的字体格式。*/
}

@font-face中的其他可选项（当然这些选项可以直接定义在某个样式中）

font-stretch<定义该字体应该如何被拉长。默认值是"正常">：
目前没有主流浏览器支持font-Stretch属性
    wider:	            使得文本更宽
    narrower:	        使得文本窄
    ultra-condensed:	使文本窄得不能再窄
    extra-condensed:	指定紧缩程度第二大的字体
    condensed:	        指定略微紧缩程度第二大的字体
    semi-condensed:	    指定略微紧缩的字体
    normal:	            指明字体既不紧缩也不加宽
    semi-expanded:	    指定略微加宽的字体
    expanded:	        指定加宽的字体
    extra-expanded:	    指定加宽程度第二大的字体
    ultra-expanded:	    指定加宽程度最大的字体
    inherit:	指定该属性与元素父项的属性采用相同的计算值
font-style<定义该字体应该是怎样样式。默认值是"正常">：
    normal
    italic
    oblique
font-weight<定义字体的粗细。默认值是"正常">：
    normal(400)
    bold(700)
    100~900
font-size<字体大小>：ont-size 属性设置文本的大小。
    能否管理文字的大小，在网页设计中是非常重要的。
    但是，你不能通过调整字体大小使段落看上去像标题，
                          或者使标题看上去像段落。
    请务必使用正确的HTML标签，
    就<h1> - <h6>表示标题和<p>表示段落：

字体大小的值可以是绝对或相对的大小。
unicode-range: <自定义字体规则的unicode字符范围>;
font-variant: <small-caps：小型大写字母>;
font-feature-settings: <font-feature-settings>;
font-variation-settings: <font-variation-settings>;
font-display: <设置自定义字体在没有加载完的显示方式>;

具体使用时再指定对应的font-family即可;font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体

.test {
  font-family: myFirstFont
}

F2. font-style中Italic和oblique在浏览器上都是倾斜的效果，那他们有啥区别呢？

• 这要从字体设计说起。字体设计的时候一般有，正常，斜体italic两种形式。但是有的字体并没有设计斜体的形式，如果你用Italic，就没有效果了~这时候你就要用Oblique（但不太支持）.
• 一种字体有粗体(font-weight)、斜体(font-style)、下划线、删除线等诸多属性。但是并不是所有字体都做了这些，一些不常用的字体，或许就只有个正常体
• italic和oblique都是向右倾斜的文字, 但区别在于Italic是指斜体字，而Oblique是倾斜的文字，对于没有斜体的字体应该使用Oblique属性值来实现倾斜的文字效果。

F3. 使用CSS3 font-feature-settings特性减除字体动画震颤效果

• font-feature-settings 是CSS的高级特性，用来提供对OpenType字体图形展示调节， MDN·font-feature-settings 。
• 首先CSS3提供了一组与OpenType字体特性显示映射的属性和值，这里我们首先利用了 font-variant-numeric ，并将其值设为 tabular-nums ，这表示要求字体的数字图像保持尺寸一致，并像在表格中一样对齐，这等同于OpenType字体中的 tnum 。
• 当没有对应的属性映射时，我们则可以使用 font-feature-settings 属性，这里我们直接将其设为要求的OpenType属性 tnum 。
• font-feature-settings 和 font-variant-numeric 属性可以同时应用，它们其中任何之一都可以达到相同的效果，但是为了更多的兼容支持，对它们同时做了定义。

F4. 低调的css3属性font-size-adjust

在我们日常的项目中经常会用到不同的字体来达到我们想要的效果，可是某些情况下不同字体的大小在相同的px下显示的大小是不同的

<div id="div1">Text 1</div>
<div id="div2">Text 2</div>
<div id="div3">Text 3</div>
<div id="div4">Text 4</div> 

div#div1 {
    font-family: Comic Sans Ms;
    font-size: 16px;
}
div#div2 {
    font-family: Tahoma;
    font-size: 16px;
}
div#div3 {
    font-family: Arial;
    font-size: 16px;
}
div#div4 {
    font-family: Times New Roman;
    font-size: 16px;
}

在火狐下的显示效果如下

可以看到同样是16px的字体显示到浏览器中缺大小不一，可能会是原来安排好的页面布局产生混乱，这是最令人难过的事情了。那么：

div#div1 {
    font-family: Comic Sans Ms;
    font-size: 16px;
    font-size-adjust: 0.50;
}
div#div2 {
    font-family: Tahoma;
    font-size: 16px;
    font-size-adjust: 0.54;
}
div#div3 {
    font-family: Arial;
    font-size: 16px;
    font-size-adjust: 0.54;
}
div#div4 {
    font-family: Times New Roman;
    font-size: 16px;
    font-size-adjust: 0.49;
}

给每个css中添加了不同的font-size-adjust值，现在在浏览器中的显示效果如我们所愿（默认按照最后一个字体的大小显示）：

在看font-size-adjust这个主角之前，我们先看这个属性的值 – aspect，什么是aspect呢？举例：Verdana 的 aspect 值是 0.58（意味着当字体尺寸为 100px 时，它的 x-height是 58px ）。每一种字体都有自己的默认aspect值。

font-size-adjust 属性就是为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。字体的小写字母 x 的高度与 font-size高度之间的比率被称为一个字体的 aspect 值。当字体拥有高的 aspect 值时，那么当此字体被设置为很小的尺寸时会更易阅读。 --来自W3C

浏览器对于aspect值的计算方法：c=(a/b) s

• a:表示实际使用字体的aspect值，
• b表示修改前字体的aspect值，
• s表示指定的字体尺寸，
• c为浏览器最后显示的尺寸。

所以当我们在我们的页面中使用了与页面原始不同的字体时，我们可以利用font-size-adjust来调整这个外来字体的大小，使他看起来和页面原始字体的大小一样，这样就不会对页面的布局产生不可预告的影响了。

F5. CSS font 属性

实例，指定在一个声明的所有字体属性：

p.ex1 {  font:15px arial,sans-serif; }
p.ex2 { font:italic bold 12px/30px Georgia, serif; }

属性定义及使用说明

• font 简写属性在一个声明中设置所有字体属性。
• 可设置的属性是（按顺序）： font-style font-variant font-weight font-size/line-height font-family
• font-size和font-family的值是必需的。如果缺少了其他值，默认值将被插入，如果有默认值的话。
• 注意： line - height属性设置行与行之间的空间。

几个对应的属性值说明

serif和sans-serif字体之间的区别

在计算机屏幕上，sans-serif字体被认为是比serif字体容易阅读

G. CSS Web安全字体组合

font-family属性是多种字体的名称，作为一个"应变"制度，以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持的第一个字体，它尝试下一个的字体。

你想要的字体类型如果浏览器找不到，它会从通用的字体类型中找到与你相似的:

下面是一些常用的字体组合，通用的字体系列