HTML与CSS——CSS字体样式
HTML与CSS——CSS字体样式
字体样式
CSS 提供了很多属性来控制字体的外观。
常用属性有:
- font-size:设置字体大小。
- font-family:设置字体类型。
- font-weight:设置字体粗细。
- Font-style: 设置字体风格,例如斜体和倾斜字体
- color:设置字体颜色。
- text-decoration:设置字体修饰。
例如:
p {font-size: 16px;font-family: Arial, sans-serif;font-weight: bold;color: blue;text-decoration: underline;
}
这段代码将所有的 p 元素设置为 Arial 字体,16px 大小,粗体,蓝色
字体类型
font-family
font-family 属性是用来设置字体的类型。它可以是一个具体的字体名称,也可以是一组字体名称,用于在浏览器不能使用第一个字体时选择其他字体。
例如:
p {font-family: Arial, sans-serif;
}
这段代码将所有的 p 元素设置为 Arial 字体,如果浏览器不支持 Arial 字体,那么会选择 sans-serif 字体。
需要注意的是,不是所有的字体都可以在所有的设备上使用。
在 font-family 属性中,最后一个字体通常是一种通用字体,它用来在浏览器不能使用前面指定的字体时作为备选字体。
通用字体类型有 serif,sans-serif,monospace,cursive,fantasy。这些字体在大部分的设备上都有支持。
serif, sans-serif, monospace, cursive, fantasy 是 CSS 中的五种通用字体类型。
- serif 字体有细的线条(称为“衬线”)在字母的结尾处,常见的 serif 字体有 Times New Roman, Georgia 等。
- sans-serif 字体没有衬线,常见的 sans-serif 字体有 Arial, Helvetica 等。
- monospace 字体中,每个字符占据相同的空间,常见的 monospace 字体有 Courier New, Consolas 等。
- cursive 字体是手写风格的字体,常见的 cursive 字体有 cursive, Comic Sans MS 等。
- fantasy 字体是装饰风格的字体,常见的 fantasy 字体有 fantasy, Impact 等。
在使用时,使用 serif 和 sans-serif 作为主要字体,因为它们在大部分的设备上都有很好的支持。而 monospace, cursive, fantasy 可以用来辅助设计,而非主要字体。
总之,在 font-family 中指定通用字体是一种最佳实践,因为它可以保证在大部分的设备上都能正确的显示文本。
@font-face
@font-face 是 CSS3 中的一种特殊规则,用来引入外部字体文件并使用它们控制字体的外观。
使用 @font-face 规则的方法是在 CSS 中添加一个 @font-face 规则,并在规则中指定字体文件的 URL。
例如:
@font-face {font-family: 'MyFont';src: url('myfont.woff');
}p {font-family: 'MyFont';
}
这段代码会引入名为 myfont.woff 的字体文件,并将其命名为 MyFont。然后你可以在 CSS 中使用 font-family: ‘MyFont’; 为元素应用该字体。
需要注意的是,不同的浏览器支持的字体文件格式不同,所以最好提供多种格式的字体文件以确保在所有浏览器上都能正常使用。常见的字体格式有 woff, woff2, ttf, eot。
使用 @font-face 规则可以让你在网页中使用任何字体,而不只是系统中已安装的字体,是一种很好的控制字体外观的方式。
需要注意的是,有些字体文件可能有版权限制,在使用之前需要确认版权,是否能够免费使用。
此外,还可以使用第三方字体库来获取字体文件,例如Google Fonts, Adobe Typekit等。这些字体库提供了大量的免费字体可供选择,可以避免版权问题。
总之,使用 @font-face 规则可以让你在网页中使用任何字体,提高网页的视觉效果。但要注意版权问题,建议使用免费字体库。
字体大小
在 CSS 中,font-size 属性可以使用以下几种方式指定字体大小:
- 像素值 (px): 像素是一种固定的单位,可以精确地指定字体大小。例如: font-size: 16px; 会将字体大小设置为 16 像素。
- 相对单位 em: em 是一种相对单位,相对于父元素的字体大小。例如: font-size: 1.2em; 会将字体大小设置为父元素字体大小的 1.2 倍。
- 相对单位 rem: rem 是一种相对单位,相对于根元素()的字体大小。例如: font-size: 1.2rem; 会将字体大小设置为根元素字体大小的 1.2 倍。
- 百分比: 可以使用百分比来指定字体大小,相对于父元素的字体大小。例如: font-size: 120%; 会将字体大小设置为父元素字体大小的 120%。
- 关键字: 使用关键字来指定字体大小,有 xx-small, x-small, small, medium, large, x-large, xx-large 共7种。
在使用时,最佳实践是使用 rem 来指定字体大小,因为它是相对于根元素的字体大小,可以方便地更改整个页面的字体大小。
设置默认字体大小为 16px,并使用 rem 作为单位来控制其它元素的字体大小。
html {font-size: 16px;
}h1 {font-size: 2rem;
}p {font-size: 1.2rem;
}
在这个例子中,我们将根元素的字体大小设置为 16px。然后使用 rem 作为单位,将 h1 元素的字体大小设置为 2rem,也就是 32px。 p 元素的字体大小设置为 1.2rem,也就是 19.2px。
这样做的好处是,如果我们需要更改页面的默认字体大小,只需要修改根元素的字体大小即可,而不用修改每个元素的字体大小。
还有一点需要注意的是,在使用 rem 作为单位时,需要在低版本浏览器上设置默认字体大小,否则可能会出现显示问题。
字体粗细
font-weight 属性用于控制字体的粗细。
常用的值有:
- normal: 默认值,表示普通的字体粗细
- bold: 粗体
- bolder: 比 bold 更粗
- lighter: 比 normal 更细
- 100~900: 数字越大,字体越粗
例如:
h1 {font-weight: bold;
}
p {font-weight: lighter;
}
这段代码将 h1 元素的字体设置为粗体,p 元素的字体设置为更细的字体。
在使用时,最佳实践是使用关键字(normal, bold, bolder, lighter)来控制字体粗细。
字体倾斜
font-style 属性用于控制字体的斜体样式。
常用的值有:
- normal: 默认值,表示普通的字体样式
- italic: 斜体
- oblique: 倾斜
例如:
h1 {font-style: italic;
}
p {font-style: oblique;
}
这段代码将 h1 元素的字体设置为斜体,p 元素的字体设置为倾斜字体。
italic 和 oblique 都是用来控制字体样式的,但是它们有一些区别。
- italic 是一种真正的斜体字体,它通常是由字体设计师专门设计的,并且通常会有一些特殊的笔画和字形设计。
- oblique 是一种通过软件将正常字体倾斜得到的样式。它不是真正的斜体字体, 是一种伪斜体字体,没有特殊的字形设计。
一般来说,如果字体本身没有斜体版本,浏览器会使用 oblique 来模拟斜体。
总之, italic 是一种真正的斜体字体,它通常是由字体设计师专门设计的,而 oblique 是一种通过软件将正常字体倾斜得到的样式,是一种伪斜体字体。在使用时,建议优先使用 italic,如果没有斜体版本就用 oblique。
字体颜色
字体颜色是指文本内容的颜色。CSS 中可以使用 color 属性来控制字体颜色。
color 属性接受以下几种值:
- 颜色名称:如 red, blue, green 等
- RGB 值:rgb(255,0,0)表示红色,rgb(0,0,255)表示蓝色
- HEX 值:#FF0000 表示红色,#0000FF 表示蓝色
例如:
p {color: blue;
}h1 {color: #FF0000;
}
这段代码将 p 元素的字体颜色设置为蓝色,h1 元素的字体颜色设置为红色。
在使用时,最佳实践是使用 HEX 值来指定字体颜色,因为 HEX 值可以精确表示颜色,在不同浏览器上显示效果一致。
字体修饰
text-decoration 属性用于设置字体修饰,可以在文本中添加线条,如下划线、删除线等。
常用的值有:
- none: 默认值,不显示修饰线
- underline: 下划线
- overline: 上划线
- line-through: 中划线
- blink: 闪烁的修饰线
例如:
h1 {text-decoration: underline;
}
p {text-decoration: line-through;
}
这段代码将 h1 元素的字体添加下划线,p 元素的字体添加中划线。
HTML与CSS——CSS字体样式相关推荐
- Css的字体样式属性大全
转:http://www.divcss5.com/rumen/r27838.shtml CSS 属性: 字体样式(Font Style) 1 字体样式 {font:font-style font-va ...
- CSS 自定义字体样式
作为前端,如果UI设计师给的psd设计图中的文字字体我们电脑中没有(电脑没有自带),如何让这种字体在客户的浏览器中正常显示呢?以前前端程序员是将文字截图直接放入页面(这种方式修改文字内容的话很不方便) ...
- css中文字体样式代码
{ font-family:"Microsoft YaHei",微软雅黑,"MicrosoftJhengHei",华文细黑,STHeiti,MingLiu } ...
- 前端入门知识css之字体样式
文章目录 1 CSS字体 1.1 字体样式 1.2 文本字体 1.3 字体粗细 1.4 字体⼤⼩ 1.5 字体行高 1.6 综合设置 1 CSS字体 1.1 字体样式 font-style 设置字体样 ...
- php中字体样式的设置,CSS里字体样式怎么设置
在网页中我们常常对网页中文字设置字体,用font-family这个属性就可以对字体样式进行设置了.那么我们今天就来教大家从html的字体到css字体的设置方法. 原始的html字体设置 Html的文字 ...
- CSS font-famil 字体样式大全
CSS字体属性 样式大全
- CSS 中文字体样式表(表一)
字体 英文名 Unicode Unicode2 Mac OS 华文细黑 STHeiti Light [STXihei] \534E\6587\7EC6\9ED1 华文细黑 华文黑体 STHeiti ...
- CSS样式、字体样式、基本选择器的基础笔记
CSS:层叠样式表 专门用来控制界面外观风格的文档 CSS注释:/* */ HTML注释:<!-- --> 使用方式 行内样式 1.行内样式-写在标签里 格式: <div style ...
- CSS中设置字体样式
CSS设置字体样式: 1.字体大小设置 字体大小设置,常见的有四种不同的方法: body{ font-size:14px; } h1{ font-size:150%; } h2{ font-size: ...
- CSS字体样式属性汇总
文章目录 字体样式属性大全 字体样式(font style) font属性 font-style font-variant font-weight font-size / line-height fo ...
最新文章
- 别瞎操心了!机器人根本不会抢你的饭碗
- 【Unity技巧】制作一个简单的NPC
- CSP认证201803-1	跳一跳[C++题解]: 模拟
- 究竟有多少假代购,在2亿多海淘用户市场里浑水摸鱼?
- 【Oracle】PL/SQL Developer使用技巧(持续更新中)
- c#启动mysql数据库服务器_c#判断数据库服务器是否已经启动的方法
- 还有什么芯片没涨?ST、ON、Microchip、Xilinx、东芝开启新一轮涨价潮
- 【剑指offer】_14 不用加减乘除做加法
- ELK入门01—Elasticsearch安装
- centos7的网卡配置 实用经典总结
- Maven 本地仓库明明有jar包,pom文件还是报错解决办法(Missing artifact...jar)
- Office2016+Visio2016安装过程
- 雷电2接口_Steinberg 发布旗舰级 32 bit / 384 kHz 雷电 2 音频接口 AXR4
- 《人月神话》出版后的网友评论
- 群晖NAS、硬盘及路由器选购及组网,打造家庭资源共享环境
- BUUCTF Crypto BabyRSA
- 关于DoG角点检测matlab实现
- JS第二次授课及字节跳动2017秋招前端工程师笔试试卷涉及知识点
- 机器学习-40-GAN-07-Feature Extraction(InfoGAN,VAE-GAN,BiGAN,Feature Disentangle(Voice Conversion))
- 【146】LRU缓存机制
热门文章
- Github每日精选(第21期):开源文件同步syncthing
- Java解压Jar文件
- 2015年第六届蓝桥杯B组(C/C++)预赛题目及个人答案
- Android实现word模板套打功能
- postcss-px2vw-pv 利用postcss实现 viewport 全新单位 pv
- wordexpansion包 | 新增词向量法构建领域词典
- python文件二进制读写_Python如何读写二进制文件
- 免费UI色彩搭配素材资源|色卡帮你找准搭配技巧
- java代码实现排序二叉树
- 定风波·三月七日沙湖道中遇雨