icon 的css,【iview】icon样式

A. 工程中引入样式文件

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

image.png

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

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

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

B. icon样式

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

image.png

① 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();

}

image.png

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

image.png

C. icon组件是怎么定义的

const prefixCls = 'ivu-icon';

computed: {

classes () {

return [

`${prefixCls}`,

{

[`${prefixCls}-${this.type}`]: this.type !== '',

[`${this.custom}`]: this.custom !== '',

}

];

},

}

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

自行搜索答案吧！

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标签，

就

-

表示标题和

表示段落：

字体大小的值可以是绝对或相对的大小。

unicode-range: ;

font-variant: ;

font-feature-settings: ;

font-variation-settings: ;

font-display: ;

image.png

具体使用时再指定对应的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属性值来实现倾斜的文字效果。

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 属性可以同时应用，它们其中任何之一都可以达到相同的效果，但是为了更多的兼容支持，对它们同时做了定义。

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

Text 1

Text 2

Text 3

Text 4

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字体容易阅读

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

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

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