CSS基础学习--7 fonts字体

news2025/2/12 8:20:23

一、CSS 字体

        CSS字体属性定义字体系列,加粗,大小,文字样式。

二、字体系列

font-family 属性设置文本的字体系列

font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体。

注意: 如果字体系列的名称超过一个字,它必须用引号,如Font Family:"宋体",多个字体系列是用一个逗号分隔指明。

p{font-family:"Times New Roman", Times, serif;}

三、字体样式

主要是用于指定斜体文字的字体样式属性。

这个属性有三个值:

  • 正常 - 正常显示文本
  • 斜体 - 以斜体字显示的文字
  • 倾斜的文字 - 文字向一边倾斜(和斜体非常类似,但不太支持)
<style>
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
</style>

效果图:

 四、字体大小

4.1、font-size 属性设置文本的大小

备注:能否管理文字的大小,在网页设计中是非常重要的。但是,你不能通过调整字体大小使段落看上去像标题,或者使标题看上去像段落。请务必使用正确的HTML标签,就<h1> - <h6>表示标题和<p>表示段落。

4.2、字体大小的值可以是绝对或相对的大小:

绝对大小:

  • 设置一个指定大小的文本
  • 不允许用户在所有浏览器中改变文本大小
  • 确定了输出的物理尺寸时绝对大小很有用

相对大小:

  • 相对于周围的元素来设置大小
  • 允许用户在浏览器中改变文字大小

备注: 如果你不指定一个字体的大小,默认大小和普通文本段落一样,是16像素(16px=1em)。

h1 {font-size:40px;}
h2 {font-size:30px;}
p {font-size:14px;}

4.3、用em来设置字体的大小

为了避免Internet Explorer 中无法调整文本的问题,许多开发者使用 em 单位代替像素。

em的尺寸单位由W3C建议。

1em和当前字体大小相等。在浏览器中默认的文字大小是16px。

因此,1em的默认大小是16px。可以通过下面这个公式将像素转换为em:px/16=em

h1 {font-size:2.5em;} /* 40px/16=2.5em */
h2 {font-size:1.875em;} /* 30px/16=1.875em */
p {font-size:0.875em;} /* 14px/16=0.875em */

注意:在上面的例子,em的文字大小是与前面的例子中像素一样。不过,如果使用 em 单位,则可以在所有浏览器中调整文本大小。不幸的是,仍然是IE浏览器的问题。调整文本的大小时,会比正常的尺寸更大或更小。

4.4、使用百分比与EM组合

在所有浏览器的解决方案中,设置 <body>元素的默认字体大小的是百分比

<style>
body {font-size:100%;}
h1 {font-size:2.5em;}
h2 {font-size:1.875em;}
p {font-size:0.875em;}
</style>

注意:我们的代码非常有效。在所有浏览器中,可以显示相同的文本大小,并允许所有浏览器缩放文本的大小。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/639976.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Haproxy的应用

Taproxy 一、Haproxy的原理Haproxy的主要特性Haproxy八种负载均衡策略LVS、Nginx、Haproxy的区别 二、搭建web群集 一、Haproxy的原理 Haproxy是可提供高可用性&#xff0c;负载均衡以及基于TCP和HTTP应用的代理&#xff0c;是免费、快速并且可靠的一种解决方案。Haproxy非常适…

电脑提示vcruntime140_1.dll丢失怎么修复?

本修复教程操作系统&#xff1a;Windows系统 vcruntime140_1.dll是电脑文件中的dll文件&#xff08;动态链接库文件&#xff09;。如果计算机中丢失了某个dll文件&#xff0c;可能会导致某些软件和游戏等程序无法正常启动运行&#xff0c;并且导致电脑系统弹窗报错。 在我们打…

FPGA基础知识-模块和端口

目录 学习目标 学习内容 端口 端口列表 端口声明 端口链接规则 学习时间 总结 学习目标&#xff1a; 1.说明Verilog 模块定义中的各个组成部分&#xff0c;例如模块名、端口列表、参数、变址声明、数据流描述语句、行为语句、调用&#xff08;实例引用》其他模块以及任务…

Java网络开发(Filter过滤器)—— tomcat的过滤器 编码控制 + 网页权限控制

目录 引出1.过滤器简介2.用过滤器实现全局编码控制&#xff08;1&#xff09;导包import javax.servlet.*;&#xff08;2&#xff09;如果是tomcat8.5&#xff0c;要把3个方法都实现&#xff08;3&#xff09;代码如下&#xff0c;要点&#xff1a;放行&#xff0c;chain.doFil…

Bug小能手系列(python)_7: BertTokenizer报错 Connection reset by peer

ConnectionResetError: [Errno 104] Connection reset by peer 0. 错误介绍1. 解决思路1.1 添加代码 force_downloadTrue1.2 删除缓存1.3 科学上网1.4 线下下载 2. 解决方法2.1 清除缓存2.2 线下下载模型&#xff08;强烈建议&#xff09; 3. 总结 0. 错误介绍 当使用transfor…

4.将图神经网络应用于大规模图数据(Cluster-GCN)

到目前为止&#xff0c;我们已经为节点分类任务单独以全批方式训练了图神经网络。特别是&#xff0c;这意味着每个节点的隐藏表示都是并行计算的&#xff0c;并且可以在下一层中重复使用。 然而&#xff0c;一旦我们想在更大的图上操作&#xff0c;由于内存消耗爆炸&#xff0c…

【Python 生成器与迭代器】零基础也能轻松掌握的学习路线与参考资料

一、Python生成器与迭代器概述 Python是一种高级编程语言&#xff0c;其中非常重要的概念就是生成器和迭代器。Python生成器和迭代器联合使用&#xff0c;能够实现高效的迭代操作&#xff0c;避免增加额外的内存消耗&#xff0c;同时提高代码的可读性。Python中常见的生成器和…

单机多节点 elasticsearch 集群安全认证

es 版本&#xff1a;7.6.2 部署环境&#xff1a;CentOS Linux release 7.6.1810 (Core) 一&#xff1a;生成 ca 证书 cd 到 es 的安装目录&#xff0c;并执行下面的命令来生成 ca 证书&#xff1a; ./bin/elasticsearch-certutil ca Elasticsearch碰到第一个直接回车&#xf…

面试专题:Mysql

1.说说自己对于 MySQL 常见的两种存储引擎&#xff1a;MyISAM与InnoDB的理解 关于二者的对比与总结: 1.count运算上的区别&#xff1a;因为MyISAM缓存有表meta-data&#xff08;行数等&#xff09;&#xff0c;因此在做COUNT(*)时对于一个结构很好的查询是不需要消耗多少资源的…

[CKA]考试之K8s 版本升级

由于最新的CKA考试改版&#xff0c;不允许存储书签&#xff0c;本博客致力怎么一步步从官网把答案找到&#xff0c;如何修改把题做对&#xff0c;下面开始我们的 CKA之旅 题目为&#xff1a; Task 现有的Kubernetes 集群正在运行版本1.22.0。仅将master节点上的所有 Kuberne…

【Python】集合 set ② ( 集合常用操作 | 集合中添加元素 | 集合中移除元素 | 集合中随机取出元素 )

文章目录 一、集合中添加元素二、集合中移除元素三、集合中随机取出元素 在 Python 中 , 集合 set 是无序的 , 因此 集合 数据容器 不支持 使用 下标索引 访问 集合元素 ; 一、集合中添加元素 调用 集合#add(新元素) 函数 , 可以将新元素添加到 集合 数据容器中 ; 集合添加元素…

Vue- ref属性

ref属性 被用来给元素或者子组件注册引用信息&#xff08;id的替代者&#xff09; 通过案例来演示_ref属性 1 编写案例 如图&#xff1a;有一个按钮&#xff0c;点击按钮可以输出dom元素 备注&#xff1a;虽然vue不用我们亲自操作dom&#xff0c;但是有的特殊的情况下就要…

【2023华中杯】B题 小学教学应用题 相似性度量及难度评估 29页论文及MATLAB代码

1 题目 B 题 小学数学应用题相似性度量及难度评估 某 MOOC 在线教育平台希望能够进行个性化教学&#xff0c;实现用户自主学习。在用户学习时&#xff0c;系统从题库中随机抽取若干道与例题同步的随堂测试题&#xff0c;记录、分析学生的学习和答题信息&#xff0c;并且课后会自…

【Pytest实战】解决ModuleNotFoundError: No module named ‘pytest’问题

&#x1f604;作者简介&#xff1a; 小曾同学.com,一个致力于测试开发的博主⛽️&#xff0c;主要职责&#xff1a;测试开发、CI/CD 如果文章知识点有错误的地方&#xff0c;还请大家指正&#xff0c;让我们一起学习&#xff0c;一起进步。&#x1f60a; 座右铭&#xff1a;不想…

JAVA程序的性能优化实践总结

1、 衡量程序性能的指标 可以从常用的性能评估指标入手&#xff1a; 并发&#xff1a;同一时间有多少请求访问TPS&#xff1a;transaction per second(每秒的事物数)QPS&#xff1a;query per second(每秒请求数)耗时&#xff1a;端到端耗时&#xff0c;服务端耗时&#xff…

并行计算——MPI编程

目录 基础知识 进程与线程&#xff0c;并行与并发 奇偶排序 MPI实现 odd-even sort 思路 环境部署 编程实现&#xff08;C&#xff09; “若干”的问题 参考链接 一个偶然的机会&#xff0c;我接触到了国立清华大学的MPI编程作业&#xff0c;也就接触到了并行计算。这…

基于Python3接口自动化测试初探

自动化测试是什么&#xff1f; 自动化测试简单来说就是借助工具的方式来辅助手动测试的行为就可以看做是自动化测试。 自动化测试工具有哪些&#xff1f; 现在常用的自动化测试工具包括&#xff1a; QTP&#xff1a;主要用于回归测试和测试同一软件的新版本 Robot Framewor…

大数据ETL工具Kettle

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言最近公司在搞大数据数字化&#xff0c;有MES,CIM,WorkFlow等等N多的系统&#xff0c;不同的数据源DB&#xff0c;需要将这些不同的数据源DB里的数据进行整治统一…

【算法】模拟,高精度

高精度加法 P1601 AB Problem&#xff08;高精&#xff09; - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 思路就是模拟&#xff0c;值得注意的就是要用字符串类型输入。存进自己的int数组时要倒着存&#xff0c;因为如果是正着存的话&#xff0c;进位会有点trouble。 时间…

Spread.NET v16.0.20222.0 ASP.NET cRACK

关于 Spread.NET 提供类似 Excel 的电子表格体验。 Spread.NET 可帮助您创建电子表格、网格、仪表板和表单。它包括一个强大的计算引擎&#xff0c;具有450 函数以及导入和导出Excel电子表格的能力。利用广泛的 .NET 电子表格 API 和强大的计算引擎来创建分析、预算、仪表板、…