1 CSS字体

1.1 字体样式

font-style 设置字体样式
● normal：指定⽂本字体样式为正常的字体
● italic：指定⽂本字体样式为斜体。

.normal {font-style:normal
}
.italic {font-style:italic
}

1.2 文本字体

font-family 属性设置⽂本的字体
font-family 属性应该设置⼏个字体名称作为⼀种"后备"机制，如果浏览器不⽀持第⼀种字体，他将尝试下⼀种字体

p {font-family:"Times New Roman", Times, serif;
}

1.3 字体粗细

font-weight：定义字体粗细
● normal：正常的字体。相当于number为400
● bold：粗体。相当于number为700
● bolder：特粗体。也相当于strong和b标签的作⽤
● lighter：细体
● ：⽤数字表示⽂本字体粗细。取值范围：100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

p.normal {font-weight: normal;
}
p.thick {font-weight: bold;
}
p.thicker {font-weight: 900;
}

1.4 字体⼤⼩

/* 设定段落⽂字⼤⼩为⾮常⼤ */
p { font-size: xx-large }/* 设定⼀级标题的⽂字⼤⼩为2.5倍⼤⼩ */
h1 { font-size: 250% }
/* 设定span⾥的⽂字⼤⼩为16px */
span { font-size: 16px; }
.larger { font-size: larger; }
.point { font-size: 24em; }
.percent { font-size: 200%;}

1.5 字体行高

lin-height：设置行高
● normal：默认值。
● ：⽤⻓度值指定⾏⾼。可以为负值。
● ：⽤百分⽐指定⾏⾼，其百分⽐取值是基于字体的⾼度尺⼨。可以为负值。
● ：设置数字，此数字是当前的字体⼤⼩的倍数。

p {line-height: normal;
}
p {line-height: 35px;
}
p {line-height: 3em;
}
p {line-height: 34%;
}

1.6 综合设置

CSS字体属性font定义字体，加粗，⼤⼩，⽂字样式。该属性是复合属性

font：<font-style> <font-weight> <font-size>/<line-height> <fon-family>
p {font:20px/1.5 '微软雅⿊'
}
p {font:bold 20px/30px '微软雅⿊'
}

2 引入外部字体
为了避免用户字体缺省，需要在服务器端设置好页面的字体样式，让网页以最佳方式进行展示
直接将下载好的字体复制到当前文件夹下（网站下载新字体）
想要使用外部字体，需要进行引入

<style type="text/css">
/* 第一步： 声明一个字体 */
@font-face {font-family: my-font;/*自定义名称*/src: url('时尚中黑简体.ttf');
}
@font-face {font-family: my-font2;src: url('迷你简双线体.ttf');
}
/* 第二步： 使用字体 */
p {font:50px my-font,sans-serif;
}
div {font:50px my-font2,sans-serif;
}
</style>
<p>这是一个段落标签
</p>

前端入门知识css之字体样式相关推荐

前端笔记之CSS基础 - 字体和文本样式
目录 1.字体样式 1.1.字体大小 1.2.字体粗细 1.3.文字样式(是否倾斜) 1.4.字体 1.5.层叠性 1.6.字体font相关属性的连写 2.文本样式 2.1.文本缩进 2.2.文本水平 ...
web前端入门学习 css（1）
黑马程序员Web前端入门教程,零基础前端视频教程pink老师_html5+css3 文章目录 html局限性 css简介(层叠样式表.级联样式表.css样式表) css语法规范 css代码样式风格(推 ...
python和html可以同时学吗_web前端入门：css+html5+javascript同时学可以吗？
HTML+CSS+JS是前端基础核心知识,肯定是都要学的.在web前端中,HTML是结构标准,CSS是样式标准,JS是行为标准,三者缺一不可.说的直白点,HTML就是骨架,CSS就是皮肤,JS就是灵魂 ...
web前端入门知识解析
一.WEB前端是什么? 使用HTML/CSS/JS以及更多的框架技术,编写网站页面.App应用.小程序.2D&3D游戏.Web VR&AR等应用,通过内容设计.交互动画.数据操作构建项 ...
前端入门知识整理（1）Vscode使用
前端入门(1) 最近社团需要,所以整理了一下从0开始学习前端的一些知识. 安装软件 (VScode)以及对应插件的安装,相关配置. 介绍vscode常用快捷键初始化第一个html程序 1.软件以及插 ...
WEB前端入门知识及要点大全
一.WEB前端是什么? 使用HTML/CSS/JS以及更多的框架技术,编写网站页面.App应用.小程序.2D&3D游戏.Web VR&AR等应用,通过内容设计.交互动画.数据操作构建项 ...
【css教程】web前端入门学习 css（1）
黑马程序员Web前端入门教程,零基础前端视频教程pink老师_html5+css3 文章目录 html局限性 css简介(层叠样式表.级联样式表.css样式表) css语法规范 css代码样式风格(推 ...
前端相关知识(CSS)(1)(美化页面效果)
1)HTML只是描述了页面的结构和内容,也就是骨 2)CSS描述的是页面的样式,也就是页面具体长成什么样子,也就是皮 3)具体来说就是就是描述了任意一个网页的元素,大小,位置,字体,颜色,背景,边框, ...
CSS 自定义字体样式
作为前端,如果UI设计师给的psd设计图中的文字字体我们电脑中没有(电脑没有自带),如何让这种字体在客户的浏览器中正常显示呢?以前前端程序员是将文字截图直接放入页面(这种方式修改文字内容的话很不方便) ...

前端入门知识css之字体样式

文章目录