글꼴 늘이기 속성을 시작할 수 없는 문제를 해결하는 방법
P粉676821490
2023-08-26 14:42:23
<p>font-stretch는 성격이 좋지 않습니다.
<pre class="brush:php;toolbar:false;"><!DOCTYPE html>
<html>
<머리>
<meta charset="utf-8">
<title>글꼴 확장</title>
<스타일>
피 {
글꼴 크기: 5em;
글꼴 계열: '무수한 프로';
}
</스타일>
</머리>
<본문>
<p>
<span style="font-stretch: 초축축">P</span>
<span style="font-stretch: 추가 압축">P</span>
<span style="font-stretch: denceded">P</span>
<span style="font-stretch: semi-densed">P</span>
<span style="font-stretch: Normal">P</span>
<span style="font-stretch: semi-expanded">P</span>
<span style="font-stretch: Expanded">P</span>
<span style="font-stretch: extra-expanded">P</span>
<span style="font-stretch: ultra-expanded">P</span>
</p>
</body>
</html></pre>
<p>저희는 더 많은 정보를 제공하고 있습니다.</p>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
font-stretch를 사용하여 이러한 글꼴 중에서 압축 또는 확장 글꼴을 선택할 수 있습니다. 사용 중인 글꼴이 압축 또는 확장 글꼴을 제공하지 않는 경우 이 속성은 효과가 없습니다.Google Fonts의 UI는 현재 여전히 정적/단일 가중치 CSS 출력을 선호합니다.
하지만 수동으로 API가 가변 글꼴에 대한
으아악@font-face규칙을 출력하도록 할 수 있습니다.범위 구분 기호로 '..'을 사용하는 것이 중요합니다. 그렇지 않으면 여러 개의 정적
woff2파일 URL을 포함하는 CSS가 생성됩니다.또한 Google의 API는 일부 사용자 에이전트 감지(브라우저 스니핑이라고도 함) 를 사용하여 이전 버전과의 호환성을 제공합니다(가변 글꼴을 지원하지 않는 브라우저의 경우). 말이 되는군요... 불행하게도 이것은 잘 작동하지 않습니다. Opera(VF를 완벽하게 지원하는)와 같은 일부 브라우저는 정적 글꼴도 수신합니다. (이것은 다른 Chromium/Blink 기반 브라우저에서도 작동할 수 있습니다)
해결 방법으로 위 CSS URL을 Firefox에서 여는 것이 좋습니다. 결과는 다음과 같아야 합니다.
으아악참고
font-weight和font-stretch속성 값에는 무게/너비 범위를 나타내는 2개의 값이 포함되어 있습니다. 이는 올바른(변수) 규칙을 얻었음을 나타내는 좋은 지표입니다.예: Inconsolata 가변 글꼴