简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > css教學 > 主體

css常用font字體屬性有哪些？字體屬性詳解

青灯夜游
發布： 2022-08-03 14:55:02
原創
6314 人瀏覽過

字體設定是網頁設計中的重要部分，合適的字體不僅會讓頁面更加美觀，也可以提升使用者體驗。 CSS 中提供了一系列用於設定文字字體樣式的屬性，例如更改字體，控製字體大小和粗細等等。

css常用font字體屬性有哪些？字體屬性詳解

【推薦學習：css影片教學】

css font字型屬性

##規定文字的字型系列1#規定文字的字體尺寸#font-style font-variant#font-weight規定字體的粗細1一個規則，允許網站下載並使用其他超過"Web- safe"字體的字體3#為元素規定aspect 值3
屬性 說明 CSS
font #在一個宣告中設定所有字體屬性 1
#font-family
#font-size ##1
規定文字的字型樣式 #1
規定文字的字型樣式 1
@font-face
#font-size-adjust
font-stretch

#縮略或拉伸目前的字型系列

3

1、font-familyfont-family 屬性的選用值如下：generic-familyfamily-name：字體名稱，一個字體名稱就代表一種字體，例如「微軟雅黑」就是一種字體；generic-family ：字體族，也就是某種類型的字體組合，一個字體族代表一種類型的字體，其中包含許多相似但又不同的字體，例如「sans-serif」就是一種無襯線字體，其中包含很多種相似的字體。 字體的預設值取決於瀏覽器設定
font-family 屬性用來設定元素內文字的字體。由於字體的種類成千上萬，有些還不是免費的，因此我們的電腦上幾乎不可能擁有所有的字體。為了最大程度的保證我們設定的字體能夠正常顯示，可以透過font-family 屬性定義一個由若干字體名稱組成的列表，字體名稱之間使用逗號,分隔，瀏覽器會先嘗試列表中的第一個字體，如果不支援則嘗試下一個，以此類推。

值

描述
family-name、

inherit#從父元素繼承字體的設定#字體族
下表中列舉了一些常用的字體族（generic-family）：
##說明 字體
serif 有襯線字體，即在文字筆畫的結尾添加特殊的裝飾線或襯線 "Lucida Bright"、" Lucida Fax"、Palatino、"Palatino Linotype"、Palladio、"URW Palladio"、serif
sans-serif 無襯線字體，即在文字筆畫結尾處是平滑的 "Open Sans"、"Fira Sans"、"Lucida Sans"、"Lucida Sans Unicode"、"Trebuchet MS"、"Liberation Sans"、"Nimbus Sans L"、sans-serif
monospace 等寬字體，即每個文字的寬度都是相同的 "Fira Mono"、"DejaVu Sans Mono"、 Menlo、Consolas、"Liberation Mono"、Monaco、"Lucida Console"、monospace
cursive 草書字體，該字體有連筆或特殊的斜體效果，會給人一種手寫的感覺 "Brush Script MT"、"Brush Script Std"、"Lucida Calligraphy"、"Lucida Handwriting"、"Apple Chancery"、cursive
#fantasy######具有特殊藝術效果的字體######Papyrus、Herculanum、"Party LET"、"Curlz MT"、Harrington、fantasy########### ##

【範例】使用font-family 屬性為HTML 元素設定字體樣式：

<!DOCTYPE html>
<html>
<head>
    <title>CSS字体</title>
    <style>
        body {
            font-family: "Lucida Calligraphy", cursive, serif, sans-serif;
        }
    </style>
</head>
<body>
    <h1>font-family 属性</h1>
</body>
</html>
登入後複製

運行結果如下圖所示：

css常用font字體屬性有哪些？字體屬性詳解

##注意：如果字體族或字體名稱中包含空格或多個單詞，則必須將它們使用引號包裹起來，例如"Times New Roman"、"Courier New"、"Segoe UI" 等，如果是在元素的style 屬性中使用則必須使用單引號。

在網頁設計中最常用的字體族是 serif 和 sans-serif，因為它們適合閱讀。在顯示一些程式碼是通常使用等寬字體，這樣可以使用程式碼看起來更加工整。

2、font-style

font-style 屬性用來設定字體的樣式，例如斜體、傾斜等，屬性的可選值如下：

值描述#normal預設值，文字以正常字體顯示italic文字以斜體顯示#oblique文字傾斜顯示inherit從父元素繼承字體樣式
#【範例】使用font-style 屬性設定字體的樣式：

<!DOCTYPE html>
<html>
<head>
    <title>CSS字体</title>
    <style>
        body {
            font-style: oblique;
        }
        .normal {
            font-style: normal;
        }
        .italic {
            font-style: italic;
        }
        .oblique {
            font-style: oblique;
        }
        .inherit {
            font-style: inherit;
        }
    </style>
</head>
<body>
    <p class="normal">normal：显示一个标准的字体</p>
    <p class="italic">italic：显示一个斜体的字体</p>
    <p class="oblique">oblique：显示一个倾斜的字体</p>
    <p class="inherit">inherit：从父元素继承字体样式</p>
</body>
</html>
登入後複製

運行結果如下圖所示：

css常用font字體屬性有哪些？字體屬性詳解

#乍看之下，您可能覺得italic 和oblique 的效果是一樣的。其實不然，italic 顯示的字體的斜體版本，而 oblique 則只是一個傾斜的普通字體。

3、font-weight

font-weight 屬性能夠設定字型的粗細，可選值如下：

值描述normal預設值，標準字體bold粗體字體bolder更粗的字體##lighter100、200、300、400、500、600、700、800、900#inherit#【範例】使用font-weight 屬性設定字體粗細：
更細的字體
由細到粗的設定字體粗細，100 為最細細的字體，400 等同於normal，700 等同於bold
從父元素繼承字體的粗細
<!DOCTYPE html>
<html>
<head>
    <title>CSS字体</title>
    <style>
    p.weight-100 {
        font-weight: 100;
    }
    p.weight-200 {
        font-weight: 100;
    }
    p.normal {
        font-weight: normal;
    }
    p.bold {
        font-weight: bold;
    }
    p.bolder {
        font-weight: bolder;
    }
    </style>
</head>
<body>
    <p class="weight-100">font-weight: 100;</p>
    <p class="weight-200">font-weight: 200;</p>
    <p class="normal">font-weight: normal;</p>
    <p class="bold">font-weight: bold;</p>
    <p class="bolder">font-weight: bolder;</p>
</body>
</html>
登入後複製

運行結果如下圖所示：

css常用font字體屬性有哪些？字體屬性詳解##4、 font-size

font-size 屬性用來設定字體的大小（字號），可選值如下：

值描述xx-small、x-small、small、medium、large、x-large、xx-large以關鍵字的形式把字體設定為不同的大小，從xx-small 到xx-large 依序變大，預設值為mediumsmaller為字體設定一個比父元素更小的尺寸larger為字體設定比父元素更大的尺寸length以數值加單位的形式把字體設定為一個固定尺寸，例如18px、2em%以百分比的形式設定一個相對於父元素字體的大小inherit從父元素繼承字體的尺寸【範例】使用font- size 屬性設定字體的大小：
<!DOCTYPE html>
<html>
<head>
    <title>CSS字体</title>
    <style>
        .xx_small {
            font-size: xx-small;
        }
        .x_small {
            font-size: x-small;
        }
        .small {
            font-size: x-small;
        }
        .medium {
            font-size: x-small;
        }
        .large {
            font-size: large;
        }
        .x-large {
            font-size: x-large;
        }
        .xx-large {
            font-size: xx-large;
        }
        .smaller {
            font-size: smaller;
        }
        .larger {
            font-size: larger;
        }
        .font-20 {
            font-size: 20px;
        }
    </style>
</head>
<body>
    <p class="xx_small">将字体大小设置为：xx-small</p>
    <p class="x_small">将字体大小设置为：x-small</p>
    <p class="small">将字体大小设置为：x-small</p>
    <p class="medium">将字体大小设置为：medium</p>  
    <p class="large">将字体大小设置为：large</p>   
    <p class="x-large">将字体大小设置为：x-large</p>   
    <p class="xx-large">将字体大小设置为：xx-large</p>   
    <p class="smaller">将字体大小设置为：smaller</p>   
    <p class="larger">将字体大小设置为：larger</p>
    <p class="font-20">将字体大小设置为 20 像素</p> 
</body>
</html>
登入後複製
運行結果如下圖所示：

css常用font字體屬性有哪些？字體屬性詳解5、font-variant

##font-variant 屬性可以將文字中的小寫英文字母轉換為小型大寫字母（轉換後的大寫字母與轉換前小寫字母的大小相仿，所以稱之為小型大寫字母）。 font-variant 屬性的可選值如下：

值#描述預設值，瀏覽器會顯示一個標準的字體將文字中的小寫英文字母轉換為小型大寫字母從父元素繼承font-variant 屬性的值
normal
small-caps
inherit

【示例】使用 font-variant 属性设置小型大写字母：

<!DOCTYPE html>
<html>
<head>
    <title>CSS字体</title>
    <style>
        .normal {
            font-variant: normal
        }
        .small {
            font-variant: small-caps
        }
    </style>
</head>
<body>
    <p class="normal">This is a paragraph</p>
    <p class="small">This is a paragraph</p>
</body>
</html>
登入後複製

运行结果如下图所示：

css常用font字體屬性有哪些？字體屬性詳解

6、font

font 属性与前面价绍的 background 属性的功能类似，通过 font 属性可以同时设置多个字体属性，不同的是，使用 font 属性需要遵循以下顺序：

font：[[font-style||font-variant||font-weight||font-stretch]?font-size[ /line-height]?font-family] | caption | icon | menu | message-box | small-caption | status-bar
登入後複製
值描述
font-style规定字体样式。参阅：font-style 中可能的值。
font-variant规定字体异体。参阅：font-variant 中可能的值。
font-weight规定字体粗细。参阅：font-weight 中可能的值。
font-size/line-height规定字体尺寸和行高。参阅：font-size 和 line-height 中可能的值。
font-family规定字体系列。参阅：font-family 中可能的值。
caption定义被标题控件（比如按钮、下拉列表等）使用的字体。
icon定义被图标标记使用的字体。
menu定义被下拉列表使用的字体。
message-box定义被对话框使用的字体。
small-captioncaption 字体的小型版本。
status-bar定义被窗口状态栏使用的字体。

在使用 font 属性时，有以下几点需要注意：

  • 使用 font 属性时必须按照如上所示的顺序，并且 font-size 和 font-family 两个属性不可忽略；

  • font 属性中的每个参数仅允许设置一个值，除 font-size 和 font-family 属性外，被忽略的属性将被设置为各自的默认值；

  • 若要定义 line-height 属性，则需要使用斜线/将 font-size 和 line-height 属性分开。

【示例】使用 font 属性同时定义多个字体效果：

<!DOCTYPE html>
<html>
<head>
    <title>CSS字体</title>
    <style>
    p.info {
        font: italic bold 12px/30px arial, sans-serif;
    }
    </style>
</head>
<body>
    <p>使用 font 属性需要遵循以下顺序：</p>
    <p class="info">font：[[font-style||font-variant||font-weight||font-stretch]?font-size[ /line-height]?font-family] | caption | icon | menu | message-box | small-caption | status-bar</p>
</body>
</html>
登入後複製

运行结果如下图所示：

css常用font字體屬性有哪些？字體屬性詳解

7、@font-face

以前在给网页文字设置一些好看的字体时，限于用户系统是否安装此字体，而只能使用三种方法解决，要么用通用字体，要么用图片替换文本，要么用Flash。而这几种方法却存在严重的缺陷。

现在好了，@font-face终于解决了这种使用网络字体的问题。

@font-face 用于从远程服务器或者用户本地加载指定的字体。

浏览器兼容性问题

css常用font字體屬性有哪些？字體屬性詳解

其实，@font-face并不是CSS3才出来的属性，早在1998年它就在CSS2中使用了，但是在CSS2.1中又被除去了，CSS3又把它加了进来。

@font-face语法

@font-face {
    font-family: <字体名>;
    src: <字体路径> [<格式>][,<字体路径> [<格式>]]*;
    [font-weight: <粗细>];
    [font-style: <样式>];
}
登入後複製

取值说明：

  • 字体名：此值指的就是你自定义的字体名称，最好是使用你下载的默认字体，他将被引用到你的Web元素中的font-family。如“font-family:”字体名”;”

  • 字体路径：此值指的是你自定义的字体的存放路径，可以是相对路径也可以是绝路径；

  • 格式：此值指的是你自定义的字体的格式，主要用来帮助浏览器识别，其值主要有以下几种类型：truetype,opentype,truetype-aat,embedded-opentype,avg等；

  • weight和style：这两个值大家一定很熟悉，weight定义字体是否为粗体，style主要定义字体样式，如斜体。

属性值描述
font-familyname必需。规定字体的名称。
srcURL必需。定义字体文件的 URL。
font-stretchnormal
condensed
ultra-condensed
extra-condensed
semi-condensed
expanded
semi-expanded
extra-expanded
ultra-expanded		可选。定义如何拉伸字体。默认是 “normal”。
font-stylenormal
italic
oblique		可选。定义字体的样式。默认是 “normal”。
font-weightnormal
bold
100
200
300
400
500
600
700
800
900		可选。定义字体的粗细。默认是 “normal”。
unicode-rangeunicode-range可选。定义字体支持的 UNICODE 字符范围。默认是 “U+0-10FFFF”。

@font-face小例子

<style type="text/css">
/* 定义 @font-face 规则 */
@font-face {

  /* 指定字体名称 */
  font-family: &#39;Bungee Inline&#39;;
  
  font-style: normal;
  font-weight: 400;
  
  /* 指定字体文件的路径 */
  src: local(&#39;Bungee Inline&#39;), local(&#39;BungeeInline-Regular&#39;), url(https://fonts.gstatic.com/s/bungeeinline/v2/Tb-1914q4rFpjT-F66PLCfn8qdNnd5eCmWXua5W-n7c.woff) format(&#39;woff&#39;);
  
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/* 字体的应用 */
h2{
    font-family: &#39;Bungee Inline&#39;;
}
</style>
登入後複製
<h2>Lecepin&#39;s Blog </h2>
登入後複製

效果：

css常用font字體屬性有哪些？字體屬性詳解

代码块中，font-family和src是必需的。src中的local()表是从本地系统查找字体，如果找不到，再从url()指定的查找。

format()指的是字体的格式，常用字体格式如下：

格式说明
TureTpe(.ttf)格式.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；
OpenType(.otf)格式.otf字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；
Web Open Font Format(.woff)格式.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；
Embedded Open Type(.eot)格式.eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】；
SVG(.svg)格式.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。
css常用font字體屬性有哪些？字體屬性詳解

src format属性兼容写法

关于兼容各个浏览器的兼容写法，可以参考一下一个国外大神Paul Irish写的兼容代码：

   @font-face {
    font-family: &#39;字体名&#39;;
    src: url(&#39;字体名.eot&#39;); /* IE9 兼容模式 */
    src: url(&#39;字体名.eot?#iefix&#39;) format(&#39;embedded-opentype&#39;), /* IE6-IE8 */
             url(&#39;字体名.woff&#39;) format(&#39;woff&#39;), /* 现代浏览器 */
             url(&#39;字体名.ttf&#39;)  format(&#39;truetype&#39;), /* Safari, Android, iOS */
             url(&#39;字体名.svg#grablau&#39;) format(&#39;svg&#39;); /* Legacy iOS */
   }
登入後複製

通常来说，有.woff和eot这两种就够了。

关于这个兼容写法，请参考：Bulletproof @font-face Syntax

字体格式转换工具

当你只有一种字体格式文件的时候，可以使用如下在线格式转换工具，生成其它格式字体文件：

Font Squirrel：https://www.fontsquirrel.com/tools/webfont-generator

@font-face generator：http://fontface.codeandmore.com/

Google Fonts：https://fonts.google.com/

8、font-size-adjust

CSS 中的 font-size-adjust 属性允许开发者基于小写字母的高度指定 font-size ，这可以有效地提高网页文字的可读性。

在这里，你不仅能了解到 font-size-adjust 属性的重要性，并且还能学会如何在你的项目中使用它。

font-size-adjust 的重要性

你访问的网站大多都是由文本组成的，由于书面文字是网站的重要组成部分，因此就很值得把注意力放到你用来显示信息的字体上面。选对正确的字体能带给用户愉快的阅读体验，然而，使用不恰当的字体则会使网站变得难以阅读。当你决定将要使用什么字体后，一般你就会再给这个字体选择一个合适的大小。

font-size　属性会设置网页中所有 font-family 下你想使用的字体的大小，然而在大多数情况下，浏览器一般都是使用 font-family 下声明的第一种字体。只有当第一种字体因为某些原因不可用时，浏览器才会使用候选字体继续渲染页面。

举个例子，看下面的代码：

body {
  font-family: &#39;Lato&#39;, Verdana, sans-serif;
}
登入後複製

如果你的浏览器从 Google Fonts 下载的 ‘Lato’ 字体不可用时，在这种情况下，Verdana 字体就会被使用。但是，脑海里 font-size 的值好像是针对 ‘Lato’ 字体设定的，而不是 Verdana。

什么是字体的纵横比？

字体的外观尺寸及其可读性可能会因为 font-size 的值而产生很大的变化，特别像是对拉丁文这种文字会导致其在大小写之间差别巨大。在这种情况下，小写字母与对应的大写字母的高度比例是决定一种字体易读性的重要因素，这个比值通常被叫做一种字体的纵横比。

正如我之前说的，一旦你设置了 font-size 的值，这个值将会对所有的字体起作用。如果候选字体的纵横比跟首选字体的纵横比相差太大，这可能影响候选字体的易读性。

font-size-adjust 属性在这种情形下则扮演着一个尤为重要的角色，因为它允许你设置所有字体的 x 轴高度 为统一大小，以便提高文字的易读性。

给 font-size-adjust 属性选择合适的值

现在你知道使用 font-size-adjust 属性的重要性了吧，是时候把它用到你的网站上了。这个属性的语法如下：

font-size-adjust: none | <number>
登入後複製

none 是默认值，这个值意味着不调整字体的大小。

你也可以设置属性的值为一个数字，这个数字将用来计算一张网页上所有字体的 x 轴高度，x 轴高度等于这个数字乘以 font-size 的值。 这可以提高小尺寸字体的可读性。以下是一个使用 font-size-adjust 属性的例子：

font-size: 20px;font-size-adjust: 0.6;
登入後複製

所有字体的 x 轴高度现在是 20px * 0.6 = 12px，一种字体的实际大小现在可以被修改以确保 x 轴高度总是等于 12px。调整后 font-size 的值可以通过以下公式计算

c = ( a / a&#39; ) s.
登入後複製

这里， c 指调整后的 font-size，s 指原先指定的 font-size，a 是 font-size-adjust 属性指定的纵横比，a&#39; 指实际字体的纵横比。

你不能设置 font-size-adjust 的值为负数，设置为 0 则会致使文字没有高度，换句话说，就是文字会被隐藏。在旧的浏览器中，例如 Firefox 40，如果设置其属性值为 0 则相当于设置为 none。

大多数情况下，开发者一般会尝试不同的 font-size 取值以确定哪个值对给定的字体最好看。这意味着在理想情况下，他们希望所有字体的 x 轴高度与首选字体的 x 轴高度相等。换句话说，最合适的 font-size-adjust 取值就是你首选字体的纵横比。

如何计算一种字体的纵横比

要确定一种字体合适的纵横比，你可以凭实际经验就是调整后的字体大小应该跟原来声明的字体大小一样。这就是说上面公式中的 a 应该跟 a&#39; 相等。

计算纵横比的第一步是先创建 2 个 <span> 元素，每个 <span> 元素将会包含一个字母和一个包围着字母的边框（因为我们要进行比较，所以每个 <span> 中的字母都必须相同）。同时，每个元素的 font-size 属性值都应该相同，但只有一个元素会使用 font-size-adjust 属性。当 font-size-adjust 的值等于给定字体的纵横比时，每个 <span> 下的字母都是一样的大小。

在下面的 demo 中，我创建了一个边框围绕着字母 ‘t’ 和 ‘b’ 并且对每组字母应用了不同的 font-size-adjust 属性值。

以下是相关代码：

.adjusted-a {
  font-size-adjust: 0.4;
}

.adjusted-b {
  font-size-adjust: 0.495;
}

.adjusted-c {
  font-size-adjust: 0.6;
}
登入後複製

正如下面 demo 所示，font-size-adjust 的值越大则字母会显得越大，反之则越小，当该值等于纵横比时，每组字母的尺寸都相等。

演示地址：https://codepen.io/SitePoint/pen/YxxbMp

css常用font字體屬性有哪些？字體屬性詳解

在网站上使用 font-size-adjust

以下 demo 使用的 font-size-adjust 取值于上一个 CodePen demo 中为 ‘Lato’ 字体设置的值，现在将会用来调整 ‘Verdana’ 这个候选字体。会有一个按钮控制修改是否发生，所以你可以看出修改前后的变化：

演示地址：https://codepen.io/SitePoint/pen/KvvLOr

css常用font字體屬性有哪些？字體屬性詳解

当你处理大量文字时效果会更加引人注目，然而上面的例子应该足够让你认识到这个属性的有用之处。

浏览器支持

目前，只有 Firefox 默认支持 font-size-adjust 属性。Chrome 和 Opera 分别从 43 和 30 版本开始作为试验特性予以支持，开发者需前往 chrome://flags 中开启 “Experimental Web Platform Features” 选项。Edge 和 Safari 不支持这个属性。

如果你决定使用这个属性，低版本浏览器的支持将不成问题，这个属性被设计时就已经考虑到向后兼容性，不支持的浏览器会正常的显示文本，支持的浏览器则会基于该属性的值调整字体大小。

9、font-stretch

font-stretch属性用来将字体在水平方向上进行拉伸或压缩，让一种字体的字符更宽或更窄。如果水平压缩，则字体变窄，如果水平拉伸，则字体变宽。

语法格式：

font-stretch: wider|narrower|ultra-condensed|extra-condensed|condensed|semi-condensed|normal|semi-expanded|expanded|extra-expanded|ultra-expanded|inherit;
登入後複製
值说明
wider使得文本更宽
narrower使得文本窄
ultra-condensed使文本窄得不能再窄
extra-condensed指定紧缩程度第二大的字体
condensed指定略微紧缩程度第二大的字体
semi-condensed指定略微紧缩的字体
normal指明字体既不紧缩也不加宽
semi-expanded指定略微加宽的字体
expanded指定加宽的字体
extra-expanded指定加宽程度第二大的字体
ultra-expanded指定加宽程度最大的字体
inherit指定该属性与元素父项的属性采用相同的计算值

就像 font-size 属性的预定义关键字（如xx-large）一样，该属性也有一系列预定义关键字，这些关键字可以是normal、或condensed、或expanded，默认值为 normal，表示不进行拉伸或压缩。

示例：

/* Keyword values */
font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;

/* Global values */
font-stretch: inherit;
font-stretch: initial;
font-stretch: unset;
登入後複製

css常用font字體屬性有哪些？字體屬性詳解

该属性不会通过伸缩缩小任意字体的几何形状。像font-variant。如果它提供了其中的几个，这仅仅是一种选择最合适的字体的方式, 。

注意：如果字体提供了多个面，font-stretch则选择与该属性值最匹配的那个面。例如，在OS X上，除了更为常见的Bold，Regular，Italic和BoldItalic外，“Helvetica Neue”字体还提供了第二组缩放的缩略字体：缩写。浏览器支持font-stretch将使用压缩的值ultra-condensed，以semi-condensed及用于其它正常表面（normal和所有展开的值）。

css常用font字體屬性有哪些？字體屬性詳解

如果字体没有浓缩或扩展，如Mac OS上的默认“Times New Roman”，font-stretch则不会有任何可见的效果，因为在所有情况下都将使用唯一合适的。

css常用font字體屬性有哪些？字體屬性詳解

（学习视频分享：web前端入门）

以上是css常用font字體屬性有哪些？字體屬性詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
css 字體屬性
來源：php.cn
上一篇：CSS伸縮盒佈局（總結分享） 下一篇：css背景漸層屬性之徑向漸層知識點總結
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
透過新增 Width 屬性將內容向左移動 我已經為主體提供了邊距。主要{左邊緣：200px;右邊距：200px；文本對齊：居中}由於我想以兩行而不是一行顯示文本，因此我在樣式中添加了width屬性。 .p{字體大小：12p...
來自於 2024-04-06 22:01:35
0
3
816
如何在 CSS 中使浮動元素垂直堆疊而不是水平堆疊？ 我正在嘗試製作一個包含兩列的網頁，一側具有主要內容，另一側具有額外的內容。但是因為我使用浮動屬性將額外的列向左對齊，所以它水平堆疊，但我希望它垂直堆疊。我目前的程式碼：.topic...
來自於 2024-04-06 20:45:26
0
2
386
使用MySQL SQL查詢計算另一張表中欄位的總和 我有一個這樣的模式：具有屬性“user_id”和“username”的用戶表以及具有屬性“customer_id”（user_id的FK）和“finalPrice”的訂單表資料庫架...
來自於 2024-04-06 19:39:29
0
1
441
MySQL從多個表中取得數據 我有一個eg_design表，其中包含以下幾列：和eg_domains表，其中包含以下列：和eg_fonts表，其中包含以下幾列：現在，基於$domain_id我想獲取eg_des...
來自於 2024-04-06 18:42:44
0
2
479
CSS 樣式未套用於網站 我正在使用Bootstrap5製作網站，但index.css屬性未應用於index.html。當我將滑鼠懸停在服務卡上時，背景應該會發生變化，從而產生過渡效果。應該是從這個到這個。...
來自於 2024-04-06 17:12:23
0
1
336
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！