web前端入门到实战：css常用样式font控制字体的多种变换

最新推荐文章于 2022-07-25 18:00:43 发布
VIP文章 最新推荐文章于 2022-07-25 18:00:43 发布
阅读量273 收藏 1
点赞数
分类专栏： css 文章标签： css 编程语言 html 前端 web前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/ITHHH111/article/details/105389242
版权

CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）font-family控制字体，由于各个电脑系统安装的字体不尽相同，但是基本装有黑体、宋体与微软雅黑这三款字体，通常这样写font-family:“黑体”, “宋体”,“Microsoft YaHei”

font-size控制字体大小，我们设置字体大小是设置它的宽度，它的高度一般电脑系统默认字体大小是16px，所以字体大小尽量不要低于16px，1em=16px； font-weight: bold;/*控制字重 一般是100-900 常用lighter(细体) normal（正常）bold加粗 */至于这个font-style，一般默认是normal，也就是正常的，如果说你设置 font-style: italic;斜体话，其实和这个的效果是差不多的;文字间的间距用的line-height如果和高度相等话，就是垂直居中了。

通常font字体的简写:font:style weight size/line-heigt font-family  /要求必须出现的2个是 size与font-family/

专门建立的学习Q-q-u-n： 784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport&
最低0.47元/天 解锁文章
白T恤架构师
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css常用样式font设置字体的多种变换(实例详解)
11-21
CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）font-family控制字体，由于各个电脑系统安装的字体不尽相同，但是基本装有黑体、宋体与微软雅黑这三款字体，通常这样写font-family:"黑体", "宋体","Microsoft YaHei" font-size控制字体大小，我们设置字体大小是设置它的宽度，它的高度一般电脑系统默认字体大小是16px，所以字体大小尽量不要低于16px，1em=16px； font-weight: bold;/*控制字重 一般是100-900 常用lighter(细体) normal（正常）bold加粗 */至于这个f
css样式的使用
zyx3070654902的博客
12-09 536
1.background： 用于设置页面以及容器的背景样式，有background-color以及url插入背景图片，no-repeat不平铺，repeat-x x轴平铺，repeat-y y轴平铺，repeat平铺（默认值）以及利用left top bottom right 来规定背景图片的位置 2.border： 利用border-right/left/bottom/top来确定选中的边框位置，后加color width style控制容器边框线的颜色 宽度 样式 3.float： 利用left和r
CSS从入门到精通——文本与字体样式
热门推荐
wangyongqi的博客
12-25 1万+
第1关：字体颜色、类型与大小 本关任务 本关任务是使用CSS字体属性设置页面字体。任务完成之后，页面效果如下： 相关知识 一般而言，用于文本的CSS属性可以分为如下两类： 字体样式：用于字体的属性，包含字体类型、大小、粗细等； 文本布局风格：用于设置文本的间距以及其他布局功能的属性，包含设置字与字之间的空间，文本如何对齐等等。 在本关卡中，我们首先学习第一种字体样式属性。 字体颜色 color 字体最直观的属性之一即前景内容的颜色，我们通过 color 属性指定字体的颜色。例如： <!DOCTYPE
切换语言时如何切换字体
weixin_43170484的博客
07-30 569
css选择器有一个方法是:lang(en),使用该方法可以进行语言切换 :lang(cn){ font-family: 'Noto Sans SC', sans-serif !important; } .loadingTitle { height: 48px; font-size: 48px; font-weight: normal; font-stretc...
css 不同语言下设置不同的字体
weixin_42080477的博客
07-29 1259
不同语言下设置不同的字体 .f-bold { font-weight: 600; } .f-medium { font-weight: 500; } .f-regular { font-weight: 400; } .f-light { font-weight: 300; } .f-thin { font-weight: 200; } .en, .ko { &amp...
nuxt 配置主题切换
weixin_42066070的博客
07-25 701
生命周期设置的话，页面刚加载的时候还是默认主题，然后突然变成设置的主题。4.这里换一下思路，给全部的。设置类名的方法暂时没有找到。设置类名这里还是以两种主题。1.久化的话，需要将。2.页面初始化时，给。.........
尚硅谷-谷粒商城P44Vue模板
weixin_44829804的博客
09-18 969
配置模板 <template> <div></div> </template> <script> //这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等） //例如：import 《组件名称》 from '《组件路径》'; export default { //import引入的组件需要注入到对象中才能使用 components: {}, props: {}, data() { /
em html字号,使用 em 来设置字体大小
weixin_36475451的博客
06-03 727
如果要避免在 网络 Explorer 中无法调解排遣文本的问题，许多启迪者运用 em 单元庖代 pixels。W3C 引荐使用 em 尺寸单元。1em 就是今朝的字体尺寸。如果一个元素的 font-size 为 16 像素，那么对付该元素，1em 就就是 16 像素。在设置字体大小时，em 的值会相对于付父元素的字体大小窜改。阅读器中默许的文本大小是 16 像素。因而 1em 的默许尺寸是 16 ...
【Web】CSS（No.13）Css的基本样式（字体样式属性：字号、字体、粗细、风格；外观属性：文本颜色、行间距、水平对齐方式、首行缩进、文本的装饰）
Sherry带你学Web
06-11 2680
Css的基本样式 CSS字体样式属性 font-size:字号大小 font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下： 1em = 16px font-family:字体 font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所...
font字体属性
Lambo
03-27 2595
1、字体属性font-weight:字体粗细 bold（加粗）、bolder、light、lighter font-size:字体大小(20px,em（对比父级元素的大小）,rem（基于16px标准像素的倍数，如1rem=1*16px）)font-family:字体名称(微软雅黑)font-style:字形（italic字体为斜体）如：div{font-size:1rem;font-weight:...
web前端入门到实战：CSS filter与前端滤镜.docx
11-22
web前端入门到实战：CSS filter与前端滤镜.docx
BootStrap入门到实战：BootStrap全局CSS样式（一）
最新发布
05-14
栅格系统示例2图片合集
Web前端开发基础：CSS控制图文混排.ppt
06-06
--*-- 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 能使用CSS控制图文混排 能力目标 CSS选择器类型 知识目标 《CSS网页样式设计与制作》 参考资料 2 教学内容 1 单元目标 3 动手实践 4 课堂小结 标签选择...
Web前端开发基础：CSS控制表单.ppt
06-06
--*-- 1 单元目标 2 教学内容 3 动手实践 4 课堂小结 单元目标 使用CSS控制页面背景、表格、表单 能力目标 学会使用CSS控制表单 知识目标 《CSS网页样式设计与制作》 参考资料 2 教学内容 1 单元目标 3 动手实践 4 ...
前端学习笔记02-css
abc_123_cba_123的博客
01-22 772
CSS引入方式选择器1.1标签选择器1.2类选择器1.3id 选择器1.4通配符选择器字体属性文本属性 引入方式 css的引入方式有三种，分别是：行内样式、内部样式、外部样式 1.行内样式表 行内样式表（内联样式表）是在元素标签内部的 style 属性中设定 CSS 样式。适合于修改简单样式. 例：<div style="color: red; font-size: 12px;">青春不常在，抓紧谈恋爱</div> 2. 内部样式表 内部样式表（内嵌样式表）是写到htm
4.CSS -- 字体及文本样式
weixin_44681760的博客
10-19 242
url(): 指定图标位置。
em = px / 字体默认值 (font-size默认16px)
tuhuolong的专栏
06-03 1748
CSS关键样式，看完你就会用了！
weixin_46162015的博客
07-15 163
1.样式设置 1）颜色color属性值：颜色的英文/16进制的颜色【】/rgb 2）字体font-family属性值：楷体/宋体.... 3）字体大小pxptem16px=12pt=1em,默认字体大小为16px,微软雅黑【除非自己单独设置过】 4）加粗font-weight属性值：bold,boider/100~900[100~500变细，600~900变粗]/lighter【变细】 5）倾斜font-style属性值：italic/...
CSS样式
qq_50646296的博客
06-02 215
目录 引言：CSS 是一种描述 HTML 文档样式的语言。 CSS 描述应该如何显示 HTML 元素。 CSS 控制字体 控制文本 border边框 外边距 内边距 引言：CSS 是一种描述 HTML 文档样式的语言。 CSS 描述应该如何显示 HTML 元素。 CSS 的语法结构为 选择器{ 属性：属性的值； 属性：属性的值； } 例 body { background-color: light...
android recyclerview item自适应高度_web前端入门到实战：css让一个盒子的高度自适应屏幕剩余的部分...
06-08
至于在 Web 前端中让一个盒子的高度自适应屏幕剩余的部分，可以通过设置该盒子的高度为 `calc(100vh - 已占用高度)` 来实现。具体代码如下： ```css .box { height: calc(100vh - 100px); /* 已占用高度为 100px *...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值