CSS - 字体(Fonts)

CSS - 字体(Fonts) 首页 / CSS入门教程 / CSS - 字体(Fonts)

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

  • font-family    :  设置字体系列。

  • font-style       :  设置字体样式。

  • font-variant   :  以小型大写字体或者正常字体显示文本。

  • font-weight    :  设置字体的粗细。

  •  font-size        :  设置字体的大小。

  • font                  :  简写属性,作用是把所有针对字体的属性设置在一个声明中

字体系列(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>

这将产生以下输出-

无涯教程网

链接:https://www.learnfk.comhttps://www.learnfk.com/css/css-fonts.html

来源:LearnFk无涯教程网

字体样式(Font Style)

下面的示例演示了如何设置元素的字体样式。可能的值为normal(正常),斜体(italic)和倾斜(oblique)。

<html>
   <head>
   </head>

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

这将产生以下输出-

无涯教程网

链接:https://www.learnfk.comhttps://www.learnfk.com/css/css-fonts.html

来源:LearnFk无涯教程网

字体变体(Font Variant)

下面的示例演示如何设置元素的字体变体。可能的值为正常(normal)和小写(small-caps)。

<html>
   <head>
   </head>

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

这将产生以下输出-

无涯教程网

链接:https://www.learnfk.comhttps://www.learnfk.com/css/css-fonts.html

来源:LearnFk无涯教程网

字体粗细(Font Weight)

下面的示例演示如何设置元素的字体粗细。 font-weight属性提供了指定字体的粗体函数。可能的值可以是normalboldbolderlighter,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> 

这将产生以下输出-

无涯教程网

链接:https://www.learnfk.comhttps://www.learnfk.com/css/css-fonts.html

来源:LearnFk无涯教程网

字体大小(Font Size)

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

<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> 

这将产生以下输出-

无涯教程网

链接:https://www.learnfk.comhttps://www.learnfk.com/css/css-fonts.html

来源:LearnFk无涯教程网

字体大小调整(Font Size Adjust)

下面的示例演示如何设置元素的字体大小调整,值可以是任何数字。

<html>
   <head>
   </head>

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

这将产生以下输出-

无涯教程网

链接:https://www.learnfk.comhttps://www.learnfk.com/css/css-fonts.html

来源:LearnFk无涯教程网

字体延伸(Font Stretch)

可能的值可以是 normal, wider, narrower, ultra-condensed, extra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded.

<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> 

这将产生以下输出-

无涯教程网

链接:https://www.learnfk.comhttps://www.learnfk.com/css/css-fonts.html

来源:LearnFk无涯教程网

字体简写属性(Font)

作用是把所有针对字体的属性设置在一个声明中,您可以使用 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>

这将产生以下输出-

无涯教程网

链接:https://www.learnfk.comhttps://www.learnfk.com/css/css-fonts.html

来源:LearnFk无涯教程网

祝学习愉快!(内容编辑有误?请选中要编辑内容 -> 右键 -> 修改 -> 提交!)

技术教程推荐

邱岳的产品手记 -〔邱岳〕

代码精进之路 -〔范学雷〕

Service Mesh实战 -〔马若飞〕

WebAssembly入门课 -〔于航〕

玩转Vue 3全家桶 -〔大圣〕

网络排查案例课 -〔杨胜辉〕

Serverless进阶实战课 -〔静远〕

PPT设计进阶 · 从基础操作到高级创意 -〔李金宝(Bobbie)〕

超级访谈:对话道哥 -〔吴翰清(道哥)〕

好记忆不如烂笔头。留下您的足迹吧 :)