当前位置：首页 > news >正文

【iview】icon样式

news 来源：原创 2025/5/2 9:53:35

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`组件是怎么定义的

<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<定义该字体应该是怎样样式。默认值是"正常">：normalitalicoblique
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: <设置自定义字体在没有加载完的显示方式>;

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属性值来实现倾斜的文字效果。

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属性设置行与行之间的空间。

几个对应的属性值说明