CSS基础教程：字体（三）

最新推荐文章于 2024-09-14 18:15:07 发布

m0_65012566

最新推荐文章于 2024-09-14 18:15:07 发布

阅读量77

点赞数

分类专栏： css 文章标签： css 前端

原文链接：https://www.tutorialspoint.com/css/css_fonts.htm

版权

css 专栏收录该内容

29 篇文章

订阅专栏

CSS基础教程：字体（三）

字体语言覆盖

CSS 的 font-language-override 属性用于覆盖特定语言的字体行为。

该属性的可能值为：

normal：指定浏览器使用 lang 属性指定的语言的字形。
<string>：指定浏览器使用指定的语言的字形。例如：对于韩语使用 “KOR”，对于英语使用 “ENG”，对于丹麦语使用 “DAN” 等。

以下是一个示例：

<html>
<head>
<style>
  .my-text {
    font-family: Arial, sans-serif;
    font-language-override: "TRK";
  }
</style>
</head>
<body>
  <p>这是一些带有特定语言字形的文本：ğüşöçİ</p>
  <p class="my-text">这是一些带有特定语言字形的文本：ğüşöçİ</p>
</body>
</html>

字体光学调整

CSS 的 font-optical-sizing 属性用于设置文本渲染是否应优化以在不同大小上查看。

该属性的可能值为：

none：不修改字形以供浏览器最佳查看。
auto：修改字形以供浏览器最佳查看。

默认情况下，字体的光学调整是启用的。当使用光学调整时，小文本大小以较粗大的字体显示，而较大文本以更细致的方式显示。

以下是一个示例：

<html>
<head>
   <link rel=”stylesheet“ href=”https://fonts.googleapis.com/css2?family=Montserrat&display=swap“>
<style>
   p {
      margin-bottom: 5px;
      border: 2px solid red;
   }
   .eng {
      font-family: ”Montserrat“, sans-serif;

   }
   .opt-no {
      font-optical-sizing: none;
   }
   .opt-yes {
      font-optical-sizing: auto;
   }
</style>
</head>
<body>
   <h3>Optical sizing -none</h3>
   <p class=”eng opt-no“>Check the optical sizing</p>

   <h3>Optical sizing -auto</h3>
   <p class=”eng opt-yes“>Check the optical sizing</p>
</body>
</html>

字体调色板

CSS提供的font-palette属性允许指定字体中包含的各种调色板之一。

此属性的可能值如下：

normal：设置默认颜色调色板或字形着色。将呈现索引0的调色板。
light：设置与’light’匹配的第一个调色板。如果找不到匹配项，则表现为normal。
dark：设置与’dark’匹配的第一个调色板。如果找不到匹配项，则表现为normal。
<palette identifier>：使用@font-palette-values 规则指定自己的调色板。

以下是使用font-palette属性的示例：

<html>
<head>
<style>
   @import url(https://fonts.googleapis.com/css2?family=Bungee+Spice);
   @font-palette-values --bungee-more-spicy {
      font-family: "Bungee Spice";
      override-colors:
      0 Orange,
      1 Yellow;
   }
   h2 {
      font-family: "Bungee Spice";
   }
   h2.more-spicy {
      font-palette: --bungee-more-spicy;
   }
</style>
</head>
<body>
   <h2>字体样式</h2>
   <h2 class="more-spicy">热情而燃烧的</h2>
</body>
</html>

font-size属性

字体大小是指字符相对于文本基线的高度。较大的字体通常用于标题以吸引注意力，而较小的字体适用于正文文本或说明文字以确保可读性。

CSS中font-size的可能值包括：

绝对大小关键字 :这些值基于用户字体大小（中等）的默认大小。包括：

xx-small
x-small
small
medium
large
x-large
xx-large
xxx-large

相对大小关键字: 这些值相对于父元素的字体大小而言较大或较小。它包括：

larger
smaller

<length>：这些是预定义的正值<length>值。它包括em、ex、rem、px、in等。

<percentage>：正值<percentage>值，相对于父元素的字体大小。

math：它是与父元素的字体大小相关的数学元素的字体大小的计算值。

下面是一个例子：

<html>
<head>
<style>
   p {
      padding: 5px;
      border: 2px solid blue;
   }
</style>
</head>
<body>
   <h2>字体大小</h2>
   <p style = "font-size: large;">
      The font-size is large.
   </p>
   <p style = "font-size: 15px">
      The font-size is 15px.
   </p>
   <p style = "font-size: x-small;">
      The font-size is x-small.
   </p>
   <p style = "font-size: 60%;">
      The font-size is 60%.
   </p>
   <p style = "font-size: 2vw;">
      The font-size 2vw (viewport width). Change the viewport size to see the effect.
   </p>
</body>
</html>

字体大小调整

font-size-adjust属性可用于指定字体的宽高比（数字比例），以控制字体的x高度（小写字母的高度）。以确保备用字体相对于指定的字体保持一致的视觉大小和比例。

font-size-adjust属性可以取以下值：

<number>：指定表示宽高比的数字值，该值是字体的x高度与由font-family属性指定的字体的x高度的比率。
none：指定不基于x高度进行字体大小调整。
<keyword>：指定要规范化的字体度量：
- ex-height：x高度除以字体大小。
- cap-height：使用cap-height除以字体大小。
- ch-width：规范化字体的水平窄间距。
- ic-width：规范化字体的水平宽间距。
- ic-height：规范化字体的垂直宽间距。

浏览器对于font-size-adjust的可能会有所不同，该属性在现代网页开发中并不广泛使用。 'Firefox’和’Safari’浏览器支持此属性。

下面是一个例子（在Firffox或Safari浏览器上查看结果）：

<html>
<head>
<style>
   p {
      padding: 5px;
      border: 2px solid blue;
   }
   p.p1 {
      font-family: 'Courier New', Courier, monospace;
      font-size-adjust:none;
   }
   p.p2 {
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-size: 20pt;
      font-size-adjust: 0.6;
   }
   p.p3 {
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      font-size: 20pt;
      font-size-adjust: ex-height 0.6;
   }
</style>
</head>
<body>
   <h2>字体大小</h2>
   <p class="p1">
      The font-size-adjust is none.
   </p>
   <p class="p2">
      The font-size-adjust is 0.6 on font-size 20pt.
   </p>
   <p class="p3">
      The font-size-adjust is ex-height and 0.6 on font-size 20pt.
   </p>
</body>
</html>