返回首页
当前位置: 主页 > 编程语言 > CSS教程 >

CSS-字体

时间:2020-04-25 14:35来源:电脑教程学习网 www.etwiki.cn 编辑:小山哥

本章教您如何设置HTML元素中可用的内容字体。您可以设置元素的以下字体属性-

  • FONT-FAMILY属性用于更改字体的面貌。

  • 字体风格的属性是用来制造一种字体斜体或倾斜。

  • 字体变属性用于创建一个小的帽的作用。

  • 字体重量属性用于增加或减少如何粗体或亮的字体出现。

  • 字体大小属性用于增加或减少字体的大小。

  • 所述字体属性用作速记指定若干其他字体属性。

设置字体系列

以下是示例,该示例演示如何设置元素的字体系列。可能的值可以是任何字体系列名称。

现场演示
<html>
   <head>
   </head>

   <body>
      <p style = "font-family:georgia,garamond,serif;">
         This text is rendered in either georgia, garamond, or the 
         default serif font depending on which font  you have at your system.
      </p>
   </body>
</html>

这将产生以下结果-

设置字体样式

下面的示例演示了如何设置元素的字体样式。可能的值是正常,斜体和斜角

现场演示
<html>
   <head>
   </head>

   <body>
      <p style = "font-style:italic;">
         This text will be rendered in italic style
      </p>
   </body>
</html> 

这将产生以下结果-

设置字体变体

下面的示例演示如何设置元素的字体变体。可能的值是normal和small-caps

现场演示
<html>
   <head>
   </head>

   <body>
      <p style = "font-variant:small-caps;">
         This text will be rendered as small caps
      </p>
   </body>
</html> 

这将产生以下结果-

设置字体粗细

下面的示例演示如何设置元素的字体粗细。font-weight属性提供了指定字体的粗体功能。可能的值可以是normal,bold,bolder,lighter,100、200、300、400、500、600、700、800、900

现场演示
<html>
   <head>
   </head>

   <body>
      <p style = "font-weight:bold;">
         This font is bold.
      </p>
      
      <p style = "font-weight:bolder;">
         This font is bolder.
      </p>
      
      <p style = "font-weight:500;">
         This font is 500 weight.
      </p>
   </body>
</html> 

这将产生以下结果-

设置字体大小

下面的示例演示如何设置元素的字体大小。font-size属性用于控制字体的大小。可能的值可以是xx小,x小,小,中,大,x大,xx大,小,大,像素大小或%大小

现场演示
<html>
   <head>
   </head>

   <body>
      <p style = "font-size:20px;">
         This font size is 20 pixels
      </p>
      
      <p style = "font-size:small;">
         This font size is small
      </p>
      
      <p style = "font-size:large;">
         This font size is large
      </p>
   </body>
</html> 

这将产生以下结果-

设置字体大小调整

下面的示例演示如何设置元素的字体大小调整。此属性使您可以调整x高度以使字体更清晰。可能的值可以是任何数字。

现场演示
<html>
   <head>
   </head>

   <body>
      <p style = "font-size-adjust:0.61;">
         This text is using a font-size-adjust value.
      </p>
   </body>
</html> 

这将产生以下结果-

设置字体拉伸

下面的示例演示如何设置元素的字体延伸。此属性依赖于用户的计算机以具有正在使用的字体的扩展或压缩版本。

可能的值可以是正常的,较宽的,较窄的,超浓缩的,超浓缩的,浓缩的,半浓缩的,半膨胀的,膨胀的,超膨胀的,超膨胀的

现场演示
<html>
   <head>
   </head>

   <body>
      <p style = "font-stretch:ultra-expanded;">
         If this doesn't appear to work, it is likely that your computer 
         doesn't have a <br>condensed or expanded version of the font being used.
      </p>
   </body>
</html> 

这将产生以下结果-

速记财产

您可以使用font属性来一次设置所有字体属性。例如-

现场演示
<html>
   <head>
   </head>

   <body>
      <p style = "font:italic small-caps bold 15px georgia;">
         Applying all the properties on the text at once.
      </p>
   </body>
</html>

这将产生以下结果-

 上一页  打印页面

------分隔线----------------------------
标签(Tag):
------分隔线----------------------------
推荐内容
  • CSS-伪元素

    CSS伪元素用于向某些选择器添加特殊效果。 您无需使用JavaScript或任何其他脚本即可使...

  • CSS-字体

    本章教您如何设置HTML元素中可用的内容字体。 您可以设置元素的以下字体属性- 该 FONT...

  • CSS-背景

    本章教您如何设置各种HTML元素的背景。 您可以设置元素的以下背景属性- 的 背景颜色 ...

  • CSS-语法

    CSS由样式规则组成,这些样式规则由浏览器解释,然后应用于文档中的相应元素。 样式规...

  • 什么是CSS?

    ascading tyle 小号 heets,被亲切地称为CSS,是一个简单的设计语言旨在简化制作网页...

  • css实现 横排二级下拉菜单

    !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR...

猜你感兴趣