찾다

집  >  Q&A  >  본문

글꼴 늘이기 속성을 시작할 수 없는 문제를 해결하는 방법

<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>
P粉676821490P粉676821490449일 전506

모든 응답(2)나는 대답할 것이다

  • P粉787934476

    P粉7879344762023-08-27 11:21:36

    font-stretch를 사용하여 이러한 글꼴 중에서 압축 또는 확장 글꼴을 선택할 수 있습니다. 사용 중인 글꼴이 압축 또는 확장 글꼴을 제공하지 않는 경우 이 속성은 효과가 없습니다.

    회신하다
    0
  • P粉567112391

    P粉5671123912023-08-27 10:45:57

    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 가변 글꼴

    으아악 으아악

    회신하다
    0
  • 취소회신하다