css字体样式(Font Style),属性

HTML如何设置字体样式? 我们开发一个页面时,会经常涉及到文字部分。HTML 默认的字体样式为宋体,12px。如果我们不想设置字体为宋体的话,需要为它更改样式。HTML 字体样式的更改需要用到 CSS。以上就是 HTML 如何设置样式的全部内容。更多 HTML 的学习请浏览。CSS 常用的字体属性有五种:​。 阅读详情
序号中文说明标记语法
1字体样式{font:font-style font-variant font-weight font-size font-family}
2字体类型{font-family:"字体1","字体2","字体3",...}
3字体大小{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}
4字体风格{font-style:inherit|italic|normal|oblique}
5字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;}
6字体颜色 {color:数值;}
7阴影颜色{text-shadow:16位色值}
8字体行高 {line-height:数值|inherit|normal;}
9字 间 距 {letter-spacing:数值|inherit|normal}
10单词间距{word-spacing:数值|inherit|normal}
11字体变形{font-variant:inherit|normal|small-cps }
12英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase}
13?{font-size-adjust:inherit|none}
14?{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}


1. 字体样式:font

语法:{font:font-style font-variant font-weight font-size font-family}
   [ <字体风格> || <字体变形> || <字体加粗> ]? <字体大小> [ / <行高> ]? <字体类形>
作用:
简写属性,提供了对字体所有属性进行设置的快捷方法。
注意:字体样式用作不同字体属性的略写,特别是行高。例如 P { font: italic bold 12pt/14pt Times, serif }指定该段为bold(粗体)和italic(斜体)Times或serif字体,12点大小,行高为14点。
例子:字体字体

2. 字体类形:font-family

语法:{font-family:字体1,字体2,字体3,...}
作用:调用客户端字体
说明:
·当指定多种字体时,用“,”分隔每种字体名称。
·当字体名称包含两个以上分开的单词时,用“”把该字体名称括起来。
·当样式规则外已经有“”时,用‘’代替“”。
注意:如果在font-family后加上多种字体的名称,浏览器会按字体名称的顺序逐一在用户的计算机里寻找已经安装的字体,一旦遇到与要求的相匹配的字体,就按这种字体显示网页内容,并停止搜索;如果不匹配就继续搜索,直到找到为止,万一样式表里的所有字体都没有安装的话,浏览器就会用自己默认的字体来替代显示网页的内容。
例子:{font-family:黑体,隶书;}  字体类型

3.字体大小:font-size

语法:{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}
作用:设定文字大小,参考取值单位
说明:使用比例关系
·xx-small
·x-small
·small
·medium
·large
·x-large
·xx-large
例子:{font-size:18pt;}  字体大小

4. 字体风格:font-style

语法:{font-style:inherit|italic|normal|oblique}
作用:使文本显示为扁斜体或斜体等表示强调
说明:
·inherit 继承
·italic  斜体
·normal  正常
·oblique 偏斜体

5.字体粗细:font-weight

语法:{font-weight:100-900|bold|bolder|lighter|normal;}
作用:设定文字的粗细
说明:
·bold 粗体(相当于数值700 )
·bolder 特粗体
·lighter 细体
·normal 正常体(相当于数值400)
注意:取值范围从数字100~900,浏览器默认的字体粗细为400。另外可以通过参数lighter和bolder使得字体在原有基础上显得更细或更粗些。

6. 字体颜色:color

语法:{color: 数值}

作用:字体颜色
说明:颜色参数取值范围
·以RGB值表示
·以16进制(hex)的色彩值表示
·以默认颜色的英文名称表示
注意:以默认颜色的英文名称表示无疑是最为方便的,但由于预定义的颜色种类太少,所以更多的网页设计者喜欢用RGB的方式。RGB方式的好处很多,不但可以用数字的形式精确地表示颜色,而且也是很多图像制作软件(如Photoshop)里默认使用的规范,这样一来就为图片和网页更好地结合打下了坚实的基础。

 

7. 文字阴影颜色:text-shadow

语法:{text-shadow:16位色值}
说明:好像不起作用?
例子:中国中国

8. 字体行高

语法:{line-height:数值|inherit|normal}
作用:行与行之间的距离
说明:取值范围
·不带单位的数字:以1为基数,相当于比例关系的100%
·带长度单位的数字:以具体的单位为准
·比例关系
注意:行距是指上下两行基准线之间的垂直距离。一般地说,英文五线格练习本,从上往下数的第三条横线就是计算机所认为的该行的基准线。如果文字字体很大,而行距相对较小的话,可能会发生上下两行文字互相重叠的现象。

9. 字 间 距:letter-spacing

语法:{letter-spacing:数值|inherit|normal}
作用:控制文本元素字母间的间距,所设置的距离适用于整个元素。
注意:数值 - 设置字间距长度,正值表示加进父元素中继承的正常长度,负值则減去正常长度。在数字后指定度量单位:ex(小写字母x的高度), em(大写字母M的宽度)。
例子: 中国china   中国china

10. 单词间距:word-spacing

语法:{word-spacing:数值|inherit|normal}
说明:单词间距指的是英文每个单词之间的距离,不包括中文文字。间隔距离的取值:points、em、pixes、in、cm、mm、pc、ex、normal等。

11. 字体变形:font-variant

语法:{font-variant:inherit|normal|small-cps
作用:用于正常和小型大写字母间切换(比正常大写字母略小)
说明:small-caps 小型大写字母

7. 字母大小写转换:text-transform

语法:{text-transform:inherit|none|capitalize|uppercase|lowercase}
作用:设置一个或几个字母的大小写标准。
说明:
·none    不改变文本的大写小写。
·capitalize 元素中毎个单词的第一个字母用大写。
·uppercase  将所有文本设置为大写。
·lowercase  将所有文本设置为小写。
例子:china abcd china abcd

 

13. font-size-adjust

语法:{font-size-adjust:inherit|none}
作用:不详

14. font-stretch

语法:{font-stretch:condensed | expanded | extra-condensed | extra-expanded | inherit | narrower | normal |
    semi-condensed | semi-expanded | ultra-condensed | ultra-expanded | wider}

【WorkBuddy专栏43】如何利用WorkBuddy开发一个PC网站(上)——环境选型、设计编码到部署上线 阅读详情

相关推荐

商店销售预测(回归&随机森林)

通过准备线性回归的数据,我们发现了一些有趣的见解,包括周末的销售增长,公共部门支付工资时的销售增长,以及11月和12月的销售增长。如果我们选择包括这些,我们可能会得到更好的结果,但在这个时候,我们不会用它来做任何预测,而是将转向另一种可能给我们更好的结果的技术。在Kaggle竞赛中,要求我们应用时间序列预测,根据厄瓜多尔大型杂货零售商Corporación Favorita的数据预测商店销售情况,建立一个模型,准确地预测在不同商店销售的商品的单位销量。在快速查看我们的训练数据集之后,我们可以看到有很多零。

qq_45791012的博客 4749

【CSS】CSS 文本样式 ② ( font 字体设置 | CSS 2.0手册使用 | font-weight 字体粗细设置 | font-style 字体斜体设置 | font 字体样式综合写法 )

一、 CSS 2.0手册使用 1、 按照文档层次查找 2、 搜索关键字查找文档 二、 font-weight 字体粗细设置 1、 语法简介 2、 代码示例 三、 font-style 字体斜体设置 1、 语法简介 2、 代码示例 四、 font 字体样式综合写法 1、 语法简介 2、 代码示例 ① 不使用综合字体样式的代码 ② 使用综合字体样式的代码 ③ 执行效果

让 学习 成为一种 习惯 ( 韩曙亮 の 技术博客 ) 8497

CAPL实战:从零构建HEX文件解析器,赋能UDS刷写

本文详细介绍了如何使用CAPL从零构建HEX文件解析器,以支持UDS刷写操作。通过解析HEX文件格式、设计状态机、优化数据结构与算法,实现高效准确的固件数据处理,并提供了与UDS刷写流程对接的工程化实践建议。

weixin_28726391的博客 442

CSS字体样式(font)[详细]

font-family:设置字体; font-style:设置字体的风格,例如倾斜、斜体等; font-weight:设置字体粗细; font-size:设置字体尺寸; font-variant:将小写字母转换为小型大写字母; font-stretch:对字体进行伸缩变形(使用较少,并且主流浏览器都不支持); font:字体属性的缩写,可以在一个声明中设置多个字体属性。

这个人好有趣....hh 3万+

【Qt】Window环境下搭建Qt6、MSVC2022开发环境(无需提前安装Visual Studio)

本文介绍 Windows 环境下无需安装 Visual Studio,搭建 Qt6 与 MSVC2022 开发环境的方法,以节省磁盘空间。核心步骤包括:用中科大镜像提速 Qt6 在线安装,需勾选 Qt Creator 17.0.1、MSVC 2022 x64 等组件;配置环境变量,添加 mingw_64、msvc2022_64 及 Qt Creator 的二进制目录;安装 MSVC 2022 编译器与 Windows 10 SDK 并记录版本;配置 Qt Creator 构建套件,可选设置 vcvarsal

油炸自行车的博客 2919

SAP数据导入工具(LSMW) 超级详细教程(批量导入内部订单)

用户提了个需求,让我批量导入内部订单几百个内部订单。我本打算用写段ABAP 代码来调用 BAPI (BAPI_INTERNALORDER_CREATE)就可以了。但想到我很久没有用过LSMW 了,都快要忘记了。于是我采用LSMW的方式,完成了任务。并把过程记录下来,形成教程方便我以后回头查看,分享出来也希望对大家有帮助。

IT小职员 2万+

css字体样式font-style属性

在html中,使用、<i></i>标记可将文字设置成斜体,在css中可以使用font-size属性设置字体的风格,例如显示斜体字样。

2301_76255666的博客 506

Rockchip MPP解码H264实战:从文件到YUV的完整流程解析

本文详细解析了在Rockchip平台上使用MPP(Media Process Platform)硬件解码H264视频文件并输出YUV数据的完整流程。通过实战代码示例,深入讲解了MPP解码器的初始化、数据包投递、非阻塞模式下的双循环控制以及YUV帧的提取与保存等核心步骤,并提供了环境搭建、编译运行和常见问题排查指南,帮助开发者高效利用硬件加速进行视频处理。

life6的博客 478

css 中 font 属性详解

Font properties字体属性 font-style: italic; 定义和用法 font-style 属性定义字体的风格。 说明 该属性设置使用斜体、倾斜或正常字体。斜体字体通常定义为字体系列中的一个单独的字体。理论上讲,用户代理可以根据正常字体计算一个斜体字体。 默认值: normal 继承性: yes 版本: CSS1 JavaScript 语法: object.style.fontStyle="italic" 可能的值 值 描

lgs198722的专栏 5846

【Python计量】linearmodels面板数据回归(一)

我们以伍德里奇《计量经济学导论现代方法》的”第14章高级面板数据方法“的案例14.1为例,使用jtrain中的数据来进行固定效应估计。

mfsdmlove的博客 9275

fasterlio原理及代码框架梳理

Faster-LIO 的优势是在保持同等高精度的前提下,显著提升计算效率,以支持更极端的应用场景(如高速无人机)和更廉价的硬件平台。可以把 Faster-LIO 理解为用一把更快的“空间哈希筛子”(iVox)替换了原来精细的“动态平衡树”(ikd-Tree),从而在精度损失极小的情况下,实现了效率的显著提升。:只在实际有地图点的空间区域动态创建和保留体素单元,形成一个稀疏的体素地图。是关键:将去畸变点云中的每个点,在 iVox 维护的局部地图中搜索近邻(如5个最近点),构建点到面的距离残差。

Studying…… 246

第六章 元素应用CSS

在CSS中,设置字体样式(font style)是通过一系列与字体相关的属性来实现的。

2301_79780386的博客 1003

ollama使用CPU安装qwen-coder模型_并在eclipse中使用ai coder插件_配置本地qwen-coder模型_ollama常用操作记录---AI大模型应用探索0002

文章摘要:作者分享了在Windows 10上安装和使用Ollama模型的过程。尝试了不同规模的qwen-coder模型(7b、1.5b和0.5b),发现7b模型响应极慢(需35分钟),而1.5b模型表现较好(3秒响应)。最终选择1.5b版本用于代码开发辅助,支持多语言自动补全。同时提到在最新版Eclipse中的AIcoder配置问题。文章重点比较了不同模型规模在CPU环境下的实际使用体验和响应速度差异。

添柴程序猿的专栏 679

CSS设置字体样式

在网页中字体是重要的组成部分,使用好字体可以让网页更加美观,在CSS中提供了一系列用来设置文本样式的属性,如更改字体,控制字体大小和粗细等等。如下::用来设置字体的。font-style:用来设置字体风格,比如斜体。:用来设置字体粗细。font-size:用来设置字体尺寸。:可以将小写字母转换为小型大写字母。:对字体进行伸缩变形(使用较小,并且主流的浏览器都不支持,就不做讲解了)。font:字体所有属性的缩写,可以在一个声明里面设置多个字体属性。CSS设置网页颜色-优快云博客。

lh11223326的博客 1万+

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

廖雪峰Python教程[完整版]

廖雪峰的python教程整理的,已经排好版了,而且还是完整的,适合小白

CSS Font-family字体系列、font-size大小、font-weight粗细、和font-style文字样式(如斜体)、给斜体标签(em,i)改为不倾斜字体案例、字体复合属性

CSS Font-family字体系列、font-size大小、font-weight粗细、和font-style文字样式(如斜体)、给斜体标签(em,i)改为不倾斜字体案例、字体复合属性

m0_51796659的博客 560

计算机控制技术及应用

《计算机控制技术及应用》通过总结作者的科研成果和吸收国内外的先进理论、方法和技术,以计算机控制系统的网络化、开放化、智能化和集成化发展趋势为主线索,主要介绍计算机控制系统的基本概念和计算机控制系统的典型形式,计算机控制系统的数学描述与基本分析方法,以及数字PID控制器、最少拍控制系统、达林算法、状态变量设计法等设计方法及其各种改进算法。重点突出计算机控制系统输入输出通道接口的设计方法和典型控制系统的设计案例与实现方法等。

CSS字体样式属性调试

CSS字体样式属性调试 1.font-size font-size属性用于设置字号 p { font-size:20px; 2.font-family font-family用于设置字体 p { font-family:"Mirsoft YaHei"; } 网页中常用字体有宋体,微软雅黑,黑体等 可以同时指定多个字体,中间以逗号隔开,表示如果浏览器不支持第一个字体,则会尝试下一个,直到找到合适的字体,如果都没有,则以我们电脑默认的字体为准。 p { font-family:"Mirsoft YaHei"

Web_chicken的博客 8218

精雕软件(JDpaint) 5.5 绿色版

精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版精雕软件(JDpaint) 5.5 绿色版

CSS字体样式属性

font-size:字号大小。 font-family字体和Unicode字体。 font-weight:字体粗细。 font-style:字体风格。 font:综合设置字体样式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style>...

匿名攻城狮 1444

css字体(font)样式总结

1.font-size:设置字体大小 写法: p {       font-size:20px;  } PS:谷歌浏览器默认的文字大小为16px,但是不同浏览器可能默认显示的字号大小不一致,我们尽量给一个明确值大小,不要默认大小。一般给body指定整个页面文字的大小   2.font-family:设置字体 写法: p{ font-family:"微软雅黑";} 也...

jt18729260336的博客 5052

CSS字体样式属性有哪些内容?

CSS字体样式属性有哪些内容?

m0_65111980的博客 1156
上一篇: 轻松几步获得上万点击率(七)控制搜索引擎
下一篇: 使用MediaCoder压制高质量H264影片
marklr
博客等级 码龄19年 52粉丝 98原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值