字体的样式及字体的分类

字体的样式

字体的分类

字体的样式

1.font-family 可以指定文字的字体 :后面跟字体的名称

font-family: Arial, Helvetica, sans-serif;

2.@font-face 自定义字体

 @font-face {/* 你给字体起的名字 */font-family: "xiyangyang";/* 字体的引入路径 */src: url(./字体/MeowScript-Regular.ttf);}

3.设置一个文字大小 font-size

 font-size: 30px;

4.设置文字斜体 font-style

font-style:oblique;

font-style

可选值：normal 文字正常显示

italic 文字斜体比较常用

oblique 文字斜体

5.设置文字的加粗 font-weight

font-weight:700;

font-weight

可选值: normal 文字正常显示默认值

bold/bolder 文字加粗

100-900之间的数值 100是最细，900最粗

6.设置一个小型大写字母意思为把段落中的小写字母变成小型的大写字母

font-variant: ;

font-variant:small-caps;

可选值：

normal 文字正常显示默认值

small-caps 字母小型大写字母

重点：因为以上跟font相关的样式前面都有font 所以 font 可以同时设置以上所有的字体相关的样式，但是颜色不可以。

font: italic bold 40px  sans-serif;

注意

1、必须有字体大小和字体类型才可简写，其他样式可以没有

2、样式之间用空格隔开，字体必须放在倒数第一位字体大写必须放在倒数第二位

字体的分类

在网页中将字体分成5大类：

serif ['serif]（衬线字体）

sans-serif（非衬线字体）

monospace （等宽字体）

cursive ['kə:siv]（草书字体）

fantasy ['fæntəsi]（虚幻字体）

可以将字体设置为这些大的分类,当设置为大的分类以后，

浏览器会自动选择指定的字体并应用样式

一般会将字体的大分类，指定为font-family中的最后一个字体 ,用来兜底

网页分别显示效果如下：

今天的分享就结束啦，感谢各位小伙伴的支持。

字体的样式及字体的分类相关推荐

python 使用 openpyxl 批量调整字体和样式
python 使用 openpyxl 批量调整字体和样式修改字体样式 Font(name,size,bold,italic,color) 获取表格中格子的字体样式设置对齐样式 Alignment( ...
python自动化办公（第9课）批量调整Excel中字体、样式
python自动化办公(第9课)批量调整Excel中字体.样式 - 修改字体样式 Font(name="字体名",size=字体大小,bold=是否加粗,italic=是否斜体,c ...
html字体的样式与行高
字体: font-size: font-family: 注意事项: 字体分类: 字体的一个类包含许多字体,通常放在最后一个逗号后边兜底. 字体的样式: font比较重要,因为简写可以提升浏览器解析的性 ...
CSS（二）元素基础样式、字体属性、文本属性
目录一.元素基础样式 1. 尺寸和单位 2. 颜色 3. 边框 4. 元素的分类 5. 显示和隐藏属性二.字体属性三.文本属性一.元素基础样式 1. 尺寸和单位宽度width和高度heigh ...
Confluence 6 中样式化字体
Confluence 提供了通过层叠样式表(CSS)调整页面展示情况的能力.本页面帮助你理解如何在 Confluence 中使用一些 CSS 样式修改字体样式和字体大小. 下面的代码为自定义的字体代码 ...
给Android Studio设置代码字体大小与界面字体样式
前言使用android studio第一步肯定就是设置字体大小了,废话不多说,直接上教程: 初始界面: 更改后界面: 目录更改代码字体大小更改界面字体大小及样式一.更改代码字体大小 File ...
修改 PhpStorm 的字体和样式
转载地址:http://wwwquan.com/show-66-365-1.html 修改程序界面的字体和字体大小.File -> settings -> Appearance 然后在这里 ...
设计师必备各类型3D字体图层样式PSD素材
字体特效太简单又或者没时间去做精细的特效除了加个阴影.放个叠层.换个字体,实在不知道如何快速美观完成设计不担心,搜UI (SOOUI) 带来了设计师必备各类字体图层样式PSD模板素材再也不让字 ...
从谷歌浏览器复制不带样式_文字特效游戏海报特效字体photoshop字体图层样式
哈喽!大家好,这里公众号,Adobe软件助手. 这一期给大家带来的字体特效是游戏海报特效字体photoshop字体图层样式典型游戏酷炫风格的photoshop字体图层样式下载,可以帮助你快速生成一样 ...

字体的样式及字体的分类

字体的样式及字体的分类相关推荐

最新文章

热门文章