字体外观选择
为给定的 font-stretch 值选择的外观取决于相关字体支持的外观。如果字体不提供与给定值完全匹配的外观，那么小于 100% 的值会映射到较窄的外观，大于或等于 100% 的值会映射到较宽的外观。
下表展示了提供不同百分比的 font-stretch 值对两种不同字体的影响：
@font-face {
font-family: "Inconsolata";
src: url("https://fonts.gstatic.com/s/inconsolata/v31/QlddNThLqRwH-OJ1UHjlKENVzlm-WkL3GZQmAwPyya15.woff2")
format("woff2");
font-stretch: 50% 200%;
}
@font-face {
font-family: "Anek Malayalam";
src: url("https://fonts.gstatic.com/s/anekmalayalam/v4/6qLUKZActRTs_mZAJUZWWkhke0nYa-f6__Azq3-gP1W7db9_.woff2")
format("woff2");
font-stretch: 75% 125%;
}
td {
border: solid;
border-width: 1px;
}
#inconsolata td {
font:
90px Inconsolata,
sans-serif;
}
#anek-malayalam td {
font: 90px "Anek Malayalam";
}
#inconsolata td:nth-child(2),
#anek-malayalam td:nth-child(2) {
font-stretch: 50%;
}
#inconsolata td:nth-child(3),
#anek-malayalam td:nth-child(3) {
font-stretch: 62.5%;
}
#inconsolata td:nth-child(4),
#anek-malayalam td:nth-child(4) {
font-stretch: 75%;
}
#inconsolata td:nth-child(5),
#anek-malayalam td:nth-child(5) {
font-stretch: 87.5%;
}
#inconsolata td:nth-child(6),
#anek-malayalam td:nth-child(6) {
font-stretch: 100%;
}
#inconsolata td:nth-child(7),
#anek-malayalam td:nth-child(7) {
font-stretch: 112.5%;
}
#inconsolata td:nth-child(8),
#anek-malayalam td:nth-child(8) {
font-stretch: 125%;
}
#inconsolata td:nth-child(9),
#anek-malayalam td:nth-child(9) {
font-stretch: 150%;
}
#inconsolata td:nth-child(10),
#anek-malayalam td:nth-child(10) {
font-stretch: 200%;
}
| 50% | 62.5% | 75% | 87.5% | 100% | 112.5% | 125% | 150% | 200% | |
|---|---|---|---|---|---|---|---|---|---|
| Inconsolata | e | e | e | e | e | e | e | e | e |
| Anek Malayalam | e | e | e | e | e | e | e | e | e |
Anek Malayalam 是一种可变的 google 字体，支持 75% 到 125% 的宽度。低于或高于此范围的值会选择最匹配的字体。
Inconsolata 是一种可变字体，提供从 50% 到 200% 的连续宽度范围。