社群
學習
工具庫
AI工具
休閒
搜尋
繁体中文
目錄
css font字型屬性
font-family 属性
" >2、font-style
" >3、font-weight
font-size 屬性用來設定字體的大小（字號），可選值如下：" >font-size 屬性用來設定字體的大小（字號），可選值如下：
" >##font-variant 屬性可以將文字中的小寫英文字母轉換為小型大寫字母（轉換後的大寫字母與轉換前小寫字母的大小相仿，所以稱之為小型大寫字母）。 font-variant 屬性的可選值如下：
6、font" >6、font
7、@font-face" >7、@font-face
Lecepin's Blog 
8、font-size-adjust" >8、font-size-adjust
9、font-stretch" >9、font-stretch
首頁 web前端 css教學 css常用font字體屬性有哪些？字體屬性詳解

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

青灯夜游
青灯夜游
Aug 03, 2022 pm 02:39 PM
css 字體屬性

字體設定是網頁設計中的重要部分，合適的字體不僅會讓頁面更加美觀，也可以提升使用者體驗。 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 id="font-family-nbsp-属性">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 id="Lecepin-s-nbsp-Blog-nbsp">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中文網其他相關文章！

本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序，用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

顯示更多

熱門文章

R.E.P.O.能量晶體解釋及其做什麼（黃色晶體）
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳圖形設置
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
刺客信條陰影：貝殼謎語解決方案
2 週前 By DDD
R.E.P.O.如果您聽不到任何人，如何修復音頻
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25：如何解鎖Myrise中的所有內容
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
顯示更多

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版，非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

顯示更多

熱門話題

gmail信箱登陸入口在哪裡
7470
15
CakePHP 教程
1377
52
steam的賬戶名稱是什麼格式
77
11
win11激活密鑰永久
48
19
NYT連接提示和答案
19
29
顯示更多
Related knowledge
bootstrap按鈕怎麼用 bootstrap按鈕怎麼用 Apr 07, 2025 pm 03:09 PM

如何使用 Bootstrap 按鈕？引入 Bootstrap CSS創建按鈕元素並添加 Bootstrap 按鈕類添加按鈕文本

bootstrap怎麼調整大小 bootstrap怎麼調整大小 Apr 07, 2025 pm 03:18 PM

要調整 Bootstrap 中元素大小，可以使用尺寸類，具體包括：調整寬度：.col-、.w-、.mw-調整高度：.h-、.min-h-、.max-h-

bootstrap怎麼看日期 bootstrap怎麼看日期 Apr 07, 2025 pm 03:03 PM

答案：可以使用 Bootstrap 的日期選擇器組件在頁面中查看日期。步驟：引入 Bootstrap 框架。在 HTML 中創建日期選擇器輸入框。 Bootstrap 將自動為選擇器添加樣式。使用 JavaScript 獲取選定的日期。

bootstrap怎麼寫分割線 bootstrap怎麼寫分割線 Apr 07, 2025 pm 03:12 PM

創建 Bootstrap 分割線有兩種方法：使用 標籤，可創建水平分割線。使用 CSS border 屬性，可創建自定義樣式的分割線。

bootstrap怎麼插入圖片 bootstrap怎麼插入圖片 Apr 07, 2025 pm 03:30 PM

在 Bootstrap 中插入圖片有以下幾種方法：直接插入圖片，使用 HTML 的 img 標籤。使用 Bootstrap 圖像組件，可以提供響應式圖片和更多樣式。設置圖片大小，使用 img-fluid 類可以使圖片自適應。設置邊框，使用 img-bordered 類。設置圓角，使用 img-rounded 類。設置陰影，使用 shadow 類。調整圖片大小和位置，使用 CSS 樣式。使用背景圖片，使用 background-image CSS 屬性。

bootstrap怎麼設置框架 bootstrap怎麼設置框架 Apr 07, 2025 pm 03:27 PM

要設置 Bootstrap 框架，需要按照以下步驟：1. 通過 CDN 引用 Bootstrap 文件；2. 下載文件並將其託管在自己的服務器上；3. 在 HTML 中包含 Bootstrap 文件；4. 根據需要編譯 Sass/Less；5. 導入定製文件（可選）。設置完成後，即可使用 Bootstrap 的網格系統、組件和样式創建響應式網站和應用程序。

bootstrap日期怎麼驗證 bootstrap日期怎麼驗證 Apr 07, 2025 pm 03:06 PM

在 Bootstrap 中驗證日期，需遵循以下步驟：引入必需的腳本和样式；初始化日期選擇器組件；設置 data-bv-date 屬性以啟用驗證；配置驗證規則（如日期格式、錯誤消息等）；集成 Bootstrap 驗證框架，並在表單提交時自動驗證日期輸入。

bootstrap導航欄怎麼設置 bootstrap導航欄怎麼設置 Apr 07, 2025 pm 01:51 PM

Bootstrap 提供了設置導航欄的簡單指南：引入 Bootstrap 庫創建導航欄容器添加品牌標識創建導航鏈接添加其他元素（可選）調整樣式（可選）

See all articles