一.css字体样式

*CSS属性书写顺序(重点)

建议遵循以下顺序: 1.布局定位属性: display / position / float / clear / visibility / overflow (建议 display 第 一个写,毕竟关系到 模式)

2.自身属性: width / height / margin / padding / border / background

3.文本属性: color / font / text-decoration / text-align / vertical-align / white- space / break-word 4.其他属性(CSS3): content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient ...

拓展@常见字体格式

不同浏览器所支持的字体格式是不一样的,我们有必要了解一下有关字体格式的知识。

1. TureType(.ttf)格式 .ttf 字体是Windows和Mac的最常见的字体,是一种RAW格式,支持这种字体的浏览器有IE9+、 Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+;

2. OpenType(.otf)格式 .otf 字体被认为是一种原始的字体格式,其内置在TureType的基础上,支持这种字体的浏览器有 Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+;

3. web Open Font Format(.woff)格式 .woff 字体是Web字体中最佳格式,他是一个开放的TrueType/OpenType的压缩版本,同时也支持元 数据包的分离,支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+;

4. Embedded Open Type(.eot)格式 .eot 字体是IE专用字体,可以从TrueType创建此格式字体,支持这种字体的浏览器有IE4+

了解了上面的知识后,我们就需要为不同的浏览器准备不同格式的字体,通常我们会通过字体生成工具 帮我们生成各种格式的字体,因此无需过于在意字体格式间的区别差异。

目录文件夹命名规范

一.css字体样式_第1张图片

 样式文件的分类

初始化css (css reset)让浏览器风格统—,把常用的初始化语句放入base.css里面。

我们把一些公共的样式放入common.css里面。

. 1.字体属性

1.1 font-size:字号

单位:

1.可以使用相对长度单位,也可以使用绝对长度单位。

2.相对长度单位比较常用,推荐使用像素单位 px ,绝对长度单位使用较少。

一.css字体样式_第2张图片

 注意:

  • .文字大小单位基本用 px ,其他单位很少使用
  • 谷歌浏览器默认的文字大小为 16p
  • 但是不同浏览器可能默认显示的字号大小不一致,我们尽星给一个明确值大小,不要默 认大小。一般给 body 指定整个页面文字的大小
    body {
    font-size: 16px;
    }

1.2 font-family:字体

  • 作用: font-family属性用于设置哪─种字体。
p{font-family: "微软雅黑";}

* 网页中常用的字体有宋体、微软雅黑、黑体等,例如将网页中所有段落文本的字体设置为微软雅黑· 可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个, 直到找到合适的字体。

p{font-family: Arial, "microsoft Yahei","微软雅黑";}

* 常用技巧: 1.各种字体之间必须使用英文状态下的逗号隔开。 2.中文字体需要加英文状态下的引号,英文字体一般不需要加引号。当需要设置英文字体时,英 文字体名必须位于中文字体名之前。 3.如果字体名中包含空格、#、$等符号,则该字体必须加英文状态下的单引号或双引号,例如 font-family: "TimesNew Roman" ;. 4.尽量使用系统默认字体,保证在任何用户的浏览器中都能正确显示。

1.3 Unicode字体

  • 为什么使用Unicode字体:在CSS中设置字体名称,直接写中文是可以的。但是在文件编码(GB2312、UTF-8等)不匹配 时会产生乱码的错误。 xp系统不支持 类似微软雅黑的中文。
  • 解决
  • 方案一:你可以使用英文来替代。比如 font-family : "Aicrosoft Yahei" 。
  • 方案二:在CSS直接使用Unicode编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称,浏览器是可以正确的解析的。
     font-family: “\5FAE\8F6F1\96C5\9ED1";表示设置字体为“微软雅黑”。
    

    一.css字体样式_第3张图片

     1.4 font-weight:字体粗细

  • 在html中如何将字体加粗我们可以用标签来实现。
  • 使用 b 和 strong 标签是文本加粗。
  • 可以使用CSS来实现,但是CSS是没有语义的。
  • 一.css字体样式_第4张图片

 提倡: 我们平时更喜欢用数字来表示加粗和不加粗。

1.5 font-style:字体风格

  • 在html中如何将字体倾斜我们可以用标签来实现
  • 字体倾斜除了用 i 和 em 标签
  • 可以使用CSS来实现,但是CSS是没有语义的
  • font-style属性用于定义字体风格,如设置斜体、倾斜或正常字体,其可用属性值如下:
  • 一.css字体样式_第5张图片

 小技巧: 平时我们很少给文字加斜体,反而喜欢给斜体标签(em, i)改为普通模式。

1.6 font:综合设置字体样式(重点)

font属性用于对字体样式进行综合设置

本语法格式如下:

选择器{ font: font-style font-weight font-size/line-height font-family;}

注意:

  • 使用font属性时,必须按上面语法格式中的顺序书写,不能更换顺序,各个属性以空格隔开。
  • 其中不需要设置的属性可以省略(取默认值),但必须保留 font-size 和 font-family 属性, 否则 font 属性将不起作用。
  • 一.css字体样式_第6张图片

 2自定义字体

2.1下载字体包

1.有时在写页面的时候ui设计的图比较复杂,里面有很多字体在默认的字体类型是没有的,因此我们要 下载相应的字体包.ttf文件

2.2 字体包引入

1.使用 @font-face 引入字体包

 

一.css字体样式_第7张图片

2.3 字体使用

1.像默认方式一样,使用 font-family 属性就行

3. 字体图标

图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的"http 请求",这都会大大降低网页的性能的。更重要的是图片不能很好的进行"缩放"因为图片放大和缩小会失真

3.1 字体图标优点

字体图标本身是字体类型,体量小,加载快 可设置图标颜色、透明、阴影和旋转等属性,使用更灵活 但是本质其实是文字,可以很随意的改变颜色、产生阴影、透明效果等等...本身体积更小,但携带的信 息并没有削减。 几乎支持所有的浏览器 移动端设备必备良药...

3.2 字体图标使用流程

一.css字体样式_第8张图片

 3.3 设计字体图标

假如图标是我们公司单独设计,那就需要第一步了,这个属于UI设计人员的工作,他们在 illustrator或 Sketch这类矢量图形软件里创建icon图标,比如下图:

一.css字体样式_第9张图片

 之后保存为 svg 格式,然后给我们前端人员就好了。 其实第一步,我们不需要关心,只需要给我们这些图标就可以了,如果图标是大众的,网上本来就有 的,可以直接跳过第一步,进入第三步。

3.4 上传生成字体包

当UI设计人员给我们svg文件的时候,我们需要转换成我们页面能使用的字体文件,而且需要生成的是兼 容性的适合各个浏览器的。

推荐网站: http://icomoon.io icomoon

字库 lcomoon成立于2011年,推出的第一个自定义图标字体生成器, 它允许用户选择他们所需要的图标,使它们成一字型。内容种类繁多,非常全面,唯一的遗憾是国外服务器,打开网速较慢.

一.css字体样式_第10张图片

 推荐网站: http://www.iconfont.cn/

阿里icon font字库 这个是阿里妈妈M2UX的一个icon font字体图标字库,包含了淘宝图标库和阿里妈妈图标库。可以 使用AI制作图标上传生成。一个字,免费,免费!

一.css字体样式_第11张图片

 一.css字体样式_第12张图片

 

3.5 字体图标的使用方法(阿里巴巴矢量图标库)

一.css字体样式_第13张图片

1. 下载图标

搜索图标 加入购物车 点进购物车 添加到项目 下载至本地



 引入字体到html

把下载文件里面的字体拎出来放在fonts字体文件夹并扔到根目录

一.css字体样式_第14张图片

3.声明字体

直接引入iconfont.css 或者打开复制@font-face部分(这里演示后者)

 注意字体文件路径问题

一.css字体样式_第15张图片

 一.css字体样式_第16张图片

4.使用字体 

一.css字体样式_第17张图片

 5.挑选相应图标并获取字体编码,应用于页面

一.css字体样式_第18张图片

 3.6 字体图标的使用方法(icomoon字库)

Icon Font & SVG Icon Sets ❍ IcoMoonicon-default.png?t=M276https://icomoon.io/1.下载图标

页面选择或者搜索自己想要的图标 点击下载

一.css字体样式_第19张图片

 

 一.css字体样式_第20张图片

 一.css字体样式_第21张图片

 一.css字体样式_第22张图片

 一.css字体样式_第23张图片

 

你可能感兴趣的:(前端钟老师的笔记,css,html,html5)