7、前端开发:CSS知识总结——字体样式

本文为博客 VIP 文章,开通 VIP 后可阅读全文

开通 VIP

目录

一、长度单位

  二、颜色单位:

三、设置字体颜色

四、在网页中将字体分成5大类:

五、设置文字大小


一、长度单位

        1:像素 px

         实际上是屏幕上的一个个小点,100px,100个小点,这个点,正常情况我们是看不到,

         如果我们把一个内容放大很多倍,就可以看到了,

         在pc端(电脑端),一般情况下1px=1个发光点。

         也是我们最常用的长度单位,它是固定单位

        固定单位 ,px是屏幕上一个个的小点,目前也是最常用的一种长度单位

        2:百分比 %  

         相对单位,它是相对于其父元素内容区(width/height)宽高  是父元素内容区的占比,

         子元素的大小会随着父元素的大小变化而变化,我们管这种大小布局,叫流式布局

          对应的是流动式布局

        3、em

         相对单位,它是相对于其父元素内字体大小而设置的,也就是1em=父元素1个font-fize,

         如果父元素没有字体大小,它就会继承祖先元素的字体大小,如果祖先元素没有设置,

         就会继承根标签(html)的默认的字体大小,也就是16px

          是以当前元素的字体大小来确定大小,如果当前元素没有大小,

Unity游戏Google Play闪退?可能是这个隐藏设置惹的祸(附完整解决方案) 本文深度解析Unity游戏在Google Play上出现闪退的疑难问题,指出其根源可能在于Google Play后台的“应用完整性”设置与游戏原生库的冲突。文章提供了从崩溃日志分析、本地与线上版本对比测试,到调整Unity构建设置、审查第三方插件以及优化分发包配置的系统性排查与根治方案,帮助开发者彻底解决这一隐蔽问题。 阅读详情

相关推荐

从寄存器到驱动:深入解读RFSoC RF-ADC阈值与校准API的底层逻辑

本文深入解析Xilinx RFSoC中RF-ADC的阈值检测与校准API的底层逻辑,涵盖寄存器映射、驱动实现及Gen3增强功能。通过详细代码示例和寄存器操作流程,揭示如何精准控制信号阈值检测与校准时序,提升系统稳定性与性能。特别探讨RF数据转换器在无线通信和雷达信号处理中的关键应用。

weixin_30552811的博客 667

CSS font-weight 值对应(Regular、Normal、Medium、Light)

经常在开发中,给出的 UI,会有 字重,它对应(Regular、Normal、Medium、Light …)这些值,并不能直接看到 font-weight 对应的数值。 font-weight 属性执行字体中字形的重量,这取决于黑度等级或笔划粗细。 取值范围:100 至 900,其大致符合下列通用重量名称: 100 - Thin 200 - Extra Light (Ultra Light) 300 - Light 400 - Regular (Normal、Book、Roman) 500 -..

卡尔特斯 2万+

CSS编程中可用的等宽字体

如果只想将等宽字体应用于特定的代码块或元素,可以使用类选择器或ID选择器来针对特定的元素应用样式。在CSS编程中,等宽字体是一种常见的选择,因为它们的字符宽度相同,使得对齐和排列代码更加方便。在使用这些等宽字体时,可以将它们应用于整个文档,或者仅应用于特定的代码块或元素。以上是一些常见的等宽字体,它们在CSS编程中使用广泛。根据个人喜好和项目需求,选择适合的等宽字体可以提高代码的可读性和整洁性。

TbbPuppet的博客 1238

css中引入自定义字体PingFang-SC-Regular

网页中想使用自定义的字体PingFang-SC-Regular,需要在css中引入 @font-face { font-family: 'PingFang-SC-Regular'; src:url('../fonts/PingFang-SC-Regular.eot'); src:url('../fonts/PingFang-SC-Regular.eot?#iefix') format('embedded-opentype'), url('../fonts/PingFang

Amumu168的博客 1万+

Regular、Normal、Medium、Light 对应的font-weight值

字体粗细:‘font-weight’属性 名称: font-weight 取值: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 初始: normal 适用于: 所有元素 继承: 是 百分比: (不适用) 媒介: 视觉 计算值: 详见描述 动画: - ‘...

静如雪的博客 6422

CSS 字体

设置字体系列 font-family 用于设置字体的系列。 Regularly,在指定的字体系列后,加上一个通用的字体系列。这样,在指定字体查找不到时,会采用通用字体。 通用的字体系列有:Serif Sans-serif Monospace Cursive Fantasy body{font-family: Arial, sans-serif} 如果字体名称存在空格或者特殊符...

DanielChen的博客 306

CSS字体样式

面试题千万不要死记,一定要自己理解,用自己的方式表达出来,在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体获取面试题千万不要死记,一定要自己理解,用自己的方式表达出来,在这里预祝各位成功拿下自己心仪的offer。需要完整面试题的朋友可以点击蓝色字体获取[外链图片转存中…(img-x3fpmlLP-1712872307972)][外链图片转存中…(img-QLYyal0G-1712872307972)]

2401_84091243的博客 988

CSS基础之CSS字体属性,web前端开发流程

本人分享一下这次字节跳动、美团、头条等大厂的面试真题涉及到的知识点,以及我个人的学习方法、学习路线等,当然也整理了一些学习文档资料出来是附赠给大家的。知识点涉及比较全面,包括但不限于前端基础,HTMLCSS,JavaScript,Vue,ES6,HTTP,浏览器,算法等等详细大厂面试题答案、学习笔记、学习视频等资料领取,点击资料领取直通车免费领取!及比较全面,包括但不限于前端基础,HTMLCSS,JavaScript,Vue,ES6,HTTP,浏览器,算法等等。

2301_79099480的博客 1051

CSS字体样式属性

前端校招精编面试解析大全点击这里即可获取完整版pdf查看由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!如果你觉得这些内容对你有帮助,可以扫码获取!!(资料价值较高,非无偿)前端校招精编面试解析大全点击这里即可获取完整版pdf查看。

2401_83704192的博客 811

前端开发基础】CSS基础知识以及CSS3

三、CSS层叠样式表 一 目标 能够说出什么是CSS 能够使用CSS基础选择器 能够设置字体样式 能够设置文本样式 能够说出CSS的三种引入方式 能够使用Chrome调试工具调试样式 1、CSS简介 CSS的主要使用场景就是美化网页的,布局页面的 1.1 HTML的局限性 说起HTML,这其实是个非常单纯的家伙,他只关注内容的语义,比如< h1>表名这是一个大标题,< p>表明这是一个段落,< img>表明这儿有一个图片,< a>表示此处有链接。 1.2

qq_43293778的博客 7851

【WEB前端开发】基础知识大总结(HTML5+CSS3)

本文共一万七千字,十六个内容点,七十个知识点。覆盖HTML5+CSS3基础知识,内容包括:转义字符、表单标签、语义化标签、Head标签、CSS引用方式、CSS背景属性、CSS文本属性、基础选择器、伪类选择器、伪元素选择器、CSS优先级、块级元素与行内元元素、盒子模型、定位、浮动、多媒体查询

Create value with coding 1万+

前端开发“三大件”——入门css的先验知识

在自己学习前端开发之余,将自已学习到的知识按照个人理解进行分享,本文以简单易懂的语言来为广大零基础开发初学者介绍css以及最常用的一些样式与属性。

m0_52947484的博客 916

【web前端开发CSS层叠样式介绍

02

m0_65431212的博客 776

css新增UI样式字体,阴影,边框,背景

新增UI方案 一、自定义字体 1.谷歌版本不一样的问题:第10节 2.Vscode没有新建目录,无法复制粘贴字体:第11节 解决方法:用Hbuilder,但是粘贴时自动关闭Hbuilder。 3. 字体效果不显示 #test{ font:200px “微软雅黑”; } 4.控制台无法完全显示 5.@font-face:允许网页开发者为其网页指定在线字体。通过这种自备字体的方式,可消除用户对电脑字体的依赖。 Font-family:所指定的字体名字将被用于font或font-family属性 S...

m0_49416118的博客 2460

如何在HTML网页引入思源黑体

css设置文字思源雅黑,分为medium, regular, light html引入思源黑体 通过Link标签在网页头部引用Google Web Font: <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900"> 字体:Noto Sans SC 大小:100, 300, 400, 500, 700, 900 在需要使用思源黑

北极雪人 1万+

深入了解font-weight

问题提出font-weight的属性值有100、200、300、400、500、600、700、800、900和normal、bold、lighter、bolder,它们的区别是?另外,在实际开发中,我们应该使用数值表达还是文字表达呢?认识font-weight根据W3C Fonts节章的规范标准,可知:font-weight可取值:100~900和normal、bold、bolder、light...

凹凸实验室 3947

如何使用 @font-face 和 font-display 在 CSS 中定义自定义字体

font-face是一个 CSS at-rule,用于定义自定义字体。通过@font-face,您可以提供一个路径到与您的 CSS 文件托管在同一服务器上的字体文件。这个规则已经存在了相当长的时间,但是有一个更新的属性,它带来了新的加载选项。在本教程中,我们将下载流行的开源字体 Roboto Mono,并使用@font-face在一个示例网页上加载该字体。为了创建最佳的用户体验,我们将使用属性来自定义加载字体的方式和时间。

rubys007的博客 2320

css草书,CSS emoji字体实现

目前主流的操作系统都已经内置emoji字体,例如苹果操作系统,iOS,安卓以及Windows 10等。然而虽然内置了moji字体,但是我们的emoji字符并不总是会自动显示为彩色的emoji的图形,例如一个笑脸:☺在我现在的编辑器里面就是个字符笑脸,预览也是个字符笑脸。如果我们希望字符笑脸呈现为彩色的图形笑脸,需要专门使用一下emoji字体,例如:article {/* windows系统下emo...

weixin_39611510的博客 734

CSS基础之字体、文本的基础设置

CSS基础之字体、文本的基础设置

拄着拐儿唱儿歌的博客 2922

上市公司-重污染行业分组数据 (2000-2024年).zip

数据简介重污染行业,是指那些在生产过程中因能源消耗大、废弃物排放多,对环境造成显著污染,且被国家环保部门明确界定为重点监管的行业类别。本数据参照《中国工业经济》《经济科学》等权威期刊的研究范式,依据《关于印发〈上市公司环保核查行业分类管理名录〉的通知》、《上市公司行业分类指引》以及《上市公司环保核查行业分类管理名录》等政府相关文件,对研究对象进行科学分组。本数据包含参考文献、最终结果。数据名称:上市公司-重污染行业分组数据数据年份:2000-2024年相关数据企业代码 企业代码 股票简称 年份 重污染行业分组变量1(1是;0否) 重污染行业分组变量2(1是;0否) 行业代码 行业名称 金融业为1,否则为0 制造业为1,否则为0 ST或PT为1,否则为0

上一篇: 8、前端开发:CSS知识总结——文本样式
下一篇: 9、前端开发:CSS知识总结——表格表单
越努力越好
博客等级 码龄4年 250粉丝 40原创
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

越努力越好

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值