【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<定义该字体应该是怎样样式。默认值是"正常">: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: <设置自定义字体在没有加载完的显示方式>;
具体使用时再指定对应的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
属性是多种字体的名称,作为一个"应变"制度,以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持的第一个字体,它尝试下一个的字体。
你想要的字体类型如果浏览器找不到,它会从通用的字体类型中找到与你相似的:
【CSS】学习iview的icon样式+font字体相关推荐
- 【CSS】CSS 文本样式 ② ( font 字体设置 | CSS 2.0手册使用 | font-weight 字体粗细设置 | font-style 字体斜体设置 | font 字体样式综合写法 )
文章目录 一. CSS 2.0手册使用 1. 按照文档层次查找 2. 搜索关键字查找文档 二. font-weight 字体粗细设置 1. 语法简介 2. 代码示例 三. font-style 字体斜 ...
- css --- [练手小项目]样式小结(字体、颜色的语义 清除浮动的使用)
说明 源代码 1.1 CSS属性书写顺序(重点) 建议遵循以下顺序: 1.布局定位属性: display / position / float / clear / visibility / overf ...
- CSS入门五:文本样式;字体颜色:英文字母,十六进制,RGB;文本颜色,字间距,行间距,对齐方式;下划线、上划线…,文本阴影,字母大小写,首行缩进
CSS入门部分已经了解了:CSS简介.样式表分类,内部样式表简单使用:选择器和类选择器简单使用:背景色.背景图:以及外部样式表的简单使用: 本篇博客主要介绍,如何对文本设置,包括字体颜色:字间距,行间 ...
- 前端小白的css学习笔记——简介、选择器、字体属性和文本属性(最后有思维导图哦)
简介 css是层叠样式表的(Casading Style Sheets)的简称.有时会成为css样式表或级联样式表.用来美化HTML,让网页更漂亮,布局更简单.使结构(HTML)和样式(css)相 ...
- css字体 text,css文本样式text、字体样式font
文本样式text 1.文本颜色color 例如h1 {color:red;} 2.文本方向direction,不常用 默认ltr从左到右,rtl表示从右到左 3.文本水平对齐方式text-align ...
- CSS文字文本样式(font字体、css外观属性)
1. font字体 1.1. font-size:大小 作用:font-size属性用于设置字号. p { font-size:20px; } 单位: 可以使用相对长度单位,也可以使用绝对长度单位. ...
- 【温故知新】CSS学习笔记(字体样式属性)
CSS字体样式属性 一.font-size:字号大小 该属性可以使用相对长度单位(推荐),也可以使用绝对长度单位,推荐使用像素单位px. 相对长度单位 说明 em ...
- CSS基础「七」精灵图 \ 字体图标 \ 三角 \ 用户界面样式 \ 页面初始化
本篇文章为 CSS 基础系列笔记第七篇,参考 黑马程序员pink老师前端入门教程 其他CSS基础相关文章: CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表 CSS基础「二」复合 ...
- CSS基础「一」基础选择器 / 字体属性 / 文本属性 / 三种样式表
前言:本篇文章为 CSS 基础系列笔记第一篇,参考 黑马程序员pink老师前端入门教程 如有侵权联系删除,如有问题欢迎指出. 其他CSS基础相关文章: CSS基础「二」复合选择器 / 元素显示模式 / ...
- CSS学习笔记----选择器与字体(字系)
部分来自456bereastreet an overview of the syntax for all CSS 2.1 selectors (based on the table in CSS 2. ...
最新文章
- LatentFusion:华盛顿大学与英伟达联合提出6D姿态估计新方法
- 做好十足准备面字节跳动,五面都过了,HR告诉我这个原因我被刷了...
- RAC对单实例DG redo大小日志修改
- Shell 学习笔记之运算符
- C# 线程手册 第一章 线程定义 .NET 和 C# 对线程的支持
- C#判断回文字符串【C#】
- 2020.10.s1 冯上
- 一加7 Pro将首发搭载UFS 3.0闪存:较UFS2.1闪存提升明显
- AngularJS-webapp($q)
- 你是否适合当一个Java程序员?一文看清
- Atitit 常见数据结构之编程语言源文件与编译文件 目录 1.1. 通过反射api得到结构	1 1.2. 通过源码ast信息	1 2. 常见语言	1 2.1. Php ast 解析	1 2.2.
- delphi代码在linux编译运行,[教程] Delphi 10.2 Linux 程序开发环境部署的基本步骤
- Excel处理数据技巧
- 中级微观经济学:Chap 15 市场需求
- apache 支持apk下载安装
- powershell ip_如何使用PowerShell更改IP地址
- 乾元浩完成A股上市辅导工作:连续多年盈利,中牧股份为控股股东
- 推荐一个小日本做的网站,超强震撼,创意绝对棒,真牛
- Cacti使用安装详解
- SOPC设计02——硬件系统开发流程
热门文章
- vue点击按钮打开下拉菜单_vue+element下拉框样式的点击按钮
- wx小程序 解决子组件样式不起效
- Caused by: org.greenrobot.eventbus.EventBusException: Subscriber class com.xxx.app.ui.activity
- 计算机电源如何选配,自己组装电脑时,该怎么选择电源才合适?
- 计算机网络专业以后装网线,安装了1000M宽带后,您就不必再上网了吗?千兆宽带有多快?...
- 前端页面实现时间显示
- Matlab基础绘图(一)-plot()
- 单片机实验计数显示器C语言代码,单片机实验1-计数显示器.doc
- 【每天学点Python】案例四:52周存钱挑战
- 黑龙江全教计算机科技有限公司,50米×8往返跑是个技术活,技巧教学很重要