【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对
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属性是多种字体的名称，作为一个"应变"制度，以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持的第一个字体，它尝试下一个的字体。
你想要的字体类型如果浏览器找不到，它会从通用的字体类型中找到与你相似的:
下面是一些常用的字体组合，通用的字体系列
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献3条内容
所有评论(0)