在这个关于HTML/的入门教程中CSS字体系列,我们将探索一些易于使用的,创造性的应用程序,以进一步增强您的网页上的文本。字体比人们想象的更重要。

我们在设计中使用的字体被仔细选择特定类型的写作以及我们正在写的内容。心理上,当我们使用特定字体时,存在潜意识的消息。字体可以传达浪漫,恐怖或异想天开的东西。让我们探索字体系列是什么,如何利用它118高手论坛 以及我们有哪些选择来传达我们的愿望。

的字体

字体家族如何运作

  • Font-Family属性指定元素的字体,例如

    ,它将设置标题1的字体。

  • Font-Family属性可以保存多个字体名称,以便容纳不同的浏览器,该浏览器可能只接受某些字体。如果浏览器不支持第一个字体,它将尝试下一个字体。

两种类型的字体族名称

  • - font-family: " times, " " courier, " " arial, "等。
  • 通用家庭- 一个通用家庭的名称,如:“Serif,”“Sans-Serif”,“Faclsive”,“Fantasy”,“Monospace”。

小费:在你的HTML中布局一个字体系列时,从你最喜欢的字体开始,以一个通用的字体系列结束。这允许浏览器在没有其他字体可用的情况下选择通用字体家族中的类似字体。

记住,必须用逗号分隔每个字体值。

此图像具有空的alt属性;它的文件名是rdnzh2jo_jkt-nctguolxw8qvzvdnhscvvtleuqq4b1c8ihuhjsiqbsimrb68sko47f32rbuxpcxaqdmn_2tzfmr2tevbyi-csbtbqjgpfekxq1pa5__adtbcj5a1jmgi0dgtwibs

在CSS中合并字体

我们将从一个完整的HTML页面开始,使用下面的代码示例:

CSSHTML以下列方式交互,以便正确显示使用所需字体系列的文本。

此代码的web输出如下所示:

探索字体系列

在CSS中,有五个通用字体系列:

衬线和无衬线字体

差异化两者之间

衬线是某些字体中字母笔画上的一种轻微的投影。

" Sans "是拉丁语,意思是"没有"。Sans-Serif字面意思是“没有serif”。

小费:对于在线网络文本,特别是在段落文本的情况下,简单的SANS-Serif字体更易于阅读。

将字体家庭合并到HTML中

有一种使用特定字体的替代方法。我们可以在HTML中内联添加字体或字体系列,而不需要添加到CSS中。这是使用Span元素完成的。

<跨度风格= "字体大小:150%;字体类型:Arial,无衬线”> Arial < /跨度>

HTML跨度礼仪

HTML非常温度,并且未能遵循任何规则可能导致Web内容未正确显示。

在编写SPAN元素时记住以下内容。

  • 请记住,对于所有HTML元素,您必须打开和关闭该元素如下所示:文字

  • 此外,您在Span元素中使用的每个样式(或一组样式)都需要进行包装报价

  • 还有,确保你用了分号分开你的风格。在这种情况下,我们正在分开字体大小字体类型

  • 用一个逗号不同的字体。在这种情况下,我们正在分离arial.无衬线字体

利用以风格的内联文本

以下代码示例显示内联跨度元素。在此示例中,我们可以体验我们想要的任何文本。我们只需使用我们想要的任何地方的文本添加此元素,而不是创建各种CSS样式,而是用文本添加此元素,并在指定字体中创建文本以显示要显示的文本。

你可以复制下面的代码来练习:

<!doctype html>



Arial

< /身体>
< / html >

此简单代码显示在网页上,如下所示,在任何CSS的帮助下都如下所示。

最终结果是能够使用您的选择字体,该字体将在HTML行的上下文中使用Web浏览器。

还看到:HTML / CSS类和ID选择器

下一个地方?

这个介绍字体类型应提供进一步调查的起点,以进一步调查HTML提供的无限创意方面。我们将继续探索下一个博客中的HTML设计领域。我们希望这一介绍激起了您的兴趣,并激励您进一步探索和潜入网络设计世界。

注册我们纳米级编程入门188金宝搏安不安全今天计划!

开始学习