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下显示的大小是不同的
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属性是多种字体的名称,作为一个"应变"制度,以确保浏览器/操作系统之间的最大兼容性。如果浏览器不支持的第一个字体,它尝试下一个的字体。
你想要的字体类型如果浏览器找不到,它会从通用的字体类型中找到与你相似的:
下面是一些常用的字体组合,通用的字体系列
icon 的css,【iview】icon样式相关推荐
- css icon设置,CSS之字体图标 icon 的多种实现
什么是icon?让我们先来看一个例子: 我们以简书为例子,图中看到的用圆圈起来的部分都是icon 这个时候你就想问了,这不就是几张图片么? 不,它不是图片,而是文字 什么??这怎么可能是文字,文字怎么 ...
- (css)修改icon图标大小
(css)修改icon图标大小 style="font-size: 20px; font-weight: bold" <i style="font-size: 20 ...
- CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
- [总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法. ...
- CSS的表格样式和列表样式
-----------------------------------------------CSS的表格样式和列表样式---------------------------------------- ...
- 纯css美化滚动条样式
https://www.emperinter.info/2020/09/20/scrollbar-in-browser/ 自己完善自己博客再Ipad等移动端的菜单时选用了左右滑动的菜单模式!当然就会使 ...
- javafx 带图片的按钮菜单_怎么制作ICON图标 图片转ICON图标方法
怎么制作ICON图标 图片转ICON图标方法?接下来就与大家分享一下,有关利用软件制作ICON图标的方法,同时也介绍利用相关转换工具实现图片转ICON的方法. 方法/步骤 首先,我们需要借助如图所示的 ...
- php文章列表样式,css列表样式有哪些?css设置列表样式的方法
关于列表的css样式有哪些以及如何设置css列表样式?接下来的这篇文章将为大家介绍关于css列表样式的内容. 1.css有序列表(ol)和css无序列表(ul) list.html 列表样式 水果 苹 ...
- amazeui学习笔记--css(基本样式)--样式统一Normalize
amazeui学习笔记--css(基本样式)--样式统一Normalize 一.总结 1.统一浏览器默认样式: Amaze UI 也使用了 normalize.css,就是让不同浏览器显示相同的样式 ...
- php怎么自定义设置打印区域,JavaScript_jQuery实现区域打印功能代码详解,使用CSS控制打印样式,需要设 - phpStudy...
jQuery实现区域打印功能代码详解 使用CSS控制打印样式,需要设置样式media="print",并且将页面中不需要打印的元素的样式display属性设置为none.如DEMO ...
最新文章
- python 常见的元字符(\d,\w ,^ ,$ 等) 的使用
- Reading-又更新了一些内容【Kotlin+MVP+Retrofit】
- 3.22 爬虫小记
- (数据结构与算法)递归及一些经典递归问题
- RxJava使用Observable.zip的Iterable参数
- ImmunityDebugger 学习
- 4.4系统,拍照-裁剪,resultCode返回0
- 计算机科学检索课题,文献检索报告课题.docx
- 图像相似度对比分析软件,图像相似度对比分析法
- 更好的图片压缩途径: WebP探索之路
- Flutter Switch
- 这三个音频变声编辑软件教你怎么给音频变声
- 【UCIe】UCIe D2D Adapter 介绍
- 设计功底如何得到提升 高效排版的技巧有哪些
- 你的磁力链为什么下不动了?(干货)
- Linux制作系统U盘
- 服务器trunk协议是什么,TRUNK端口汇聚技术原理和作用介绍
- SpringBoot开发详解(三)--SpringBoot配置文件YML注意事项
- 深入理解卷积神经网络(附代码,底层实现)
- Docker compose ERROR: for resources Cannot start service xxd: network not found
热门文章
- 微信小程序实现tab切换(可滑动切换)
- 2012年软件评测师真题精选
- pinyin4j获取汉字正确的全拼和简拼(解决多音字问题)
- VTK用户指南3:第一部分vtk简介_3系统概述
- Inverting the Generator of a GAN 生成器反向
- Robust Transmit Beamforming for Secure ISAC
- 结构体中的LNode与*LinkList
- LNode *和LinkList的小区分
- 服务器虚拟机怎么安装win7系统教程,虚拟机怎么安装win7系统 虚拟机安装win7系统教程...
- 虚拟机win7系统安装vmtool