programing

다중 글꼴 가중치, 하나의 @ 글꼴-면 쿼리

elecom 2023. 8. 1. 20:16
반응형

다중 글꼴 가중치, 하나의 @ 글꼴-면 쿼리

클라비카 글꼴을 가져와야 하는데 여러 모양과 크기로 받았습니다.

Klavika-Bold-Italic.otf
Klavika-Bold.otf
Klavika-Light-Italic.otf
Klavika-Light.otf
Klavika-Medium-Italic.otf
Klavika-Medium.otf
Klavika-Regular-Italic.otf
Klavika-Regular.otf

이제 하나만 가지고 그것들을 CSS로 가져오는 것이 가능한지 알고 싶습니다.@font-face- 쿼리, 여기서 정의하는 것은weight조회 중에쿼리를 8번 복사/붙여넣기하지 않습니다.

그래서 다음과 같은 것이 있습니다.

@font-face {
  font-family: 'Klavika';
  src: url(../fonts/Klavika-Regular.otf), weight:normal;
  src: url(../fonts/Klavika-Bold.otf), weight:bold;
}

사실 @font-face의 특별한 맛은 당신이 요청하는 것을 허용할 것입니다.

다음은 글꼴이 서로 다른 동일한 글꼴 패밀리 이름을 사용하는 예입니다.

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Regular-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Italic-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: italic;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-Bold-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: "DroidSerif";
  src: url("DroidSerif-BoldItalic-webfont.ttf") format("truetype");
  font-weight: bold;
  font-style: italic;
}

이제 다음을 지정할 수 있습니다.font-weight:bold또는font-style:italic글꼴 패밀리를 지정하거나 재정의하지 않고 원하는 요소로 이동합니다.font-weight그리고.font-style.

body { font-family:"DroidSerif", Georgia, serif; }

h1 { font-weight:bold; }

em { font-style:italic; }

strong em {
  font-weight:bold;
  font-style:italic;
}

이 기능과 표준 사용에 대한 전체 개요는 이 문서를 참조하십시오.

예제 펜

@font-face {
  font-family: 'Klavika';
  src: url(../fonts/Klavika-Regular.otf) format('truetype') font-weight-normal,
       url(../fonts/Klavika-Bold.otf) format('truetype') font-weight-bold,
       url(../fonts/Klavika-Bold-Italic.otf) format('truetype') font-italic font-weight-bold;
}

2022년 업데이트: 가변 글꼴 사용

글꼴을 가변 글꼴로 사용할 수 있는 경우 다음과 같이 여러 글꼴 가중치를 단일 규칙에 실제로 결합할 수 있습니다.

@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 0% 200%;
  src: url(https://fonts.gstatic.com/s/robotoflex/v9/NaNeepOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGfttPZktqc2VdZ80KvCLZaPcSBZtOx2MifRuWR28sPJtUMbsFEK6cRrleUx9Xgbm3WLHa_F4Ep4Fm0PN19Ik5Dntczx0wZGzhPlL1YNMYKbv9_1IQXOw7AiUJVXpRJ6cXW4O8TNGoXjC79QRyaLshNDUf9-EmFw.woff2) format('woff2');
}

두 개의 값을 추가하여 글꼴-가중치 범위를 지정해야 합니다.

font-weight: 100 1000;


slider_weight.addEventListener("input", function () {
  var axisValue = slider_weight.value;
  testarea.style.fontWeight = axisValue;
  value_weight.innerText = axisValue;
});

slider_width.addEventListener("input", function () {
  var axisValue2 = slider_width.value;
  testarea.style.fontStretch = axisValue2+'%';
  value_width.innerText = axisValue2;
});
body{
  font-family: 'Roboto Flex';
  font-size:5vw
}


@font-face {
  font-family: 'Roboto Flex';
  font-style: normal;
  font-weight: 100 1000;
  font-stretch: 0% 200%;
  src: url(https://fonts.gstatic.com/s/robotoflex/v9/NaNeepOXO_NexZs0b5QrzlOHb8wCikXpYqmZsWI-__OGfttPZktqc2VdZ80KvCLZaPcSBZtOx2MifRuWR28sPJtUMbsFEK6cRrleUx9Xgbm3WLHa_F4Ep4Fm0PN19Ik5Dntczx0wZGzhPlL1YNMYKbv9_1IQXOw7AiUJVXpRJ6cXW4O8TNGoXjC79QRyaLshNDUf9-EmFw.woff2) format('woff2');
}


#testarea {
  font-size: 2em;
  transition:0.5s;
  font-weight:100;
  font-stretch: 0%;
}

.regular{
font-weight:400
}

.bold{
font-weight:900
}

.condensed{
font-stretch:0%;
}
<h1 class="bold">Roboto Flex bold</h1>
<h1 class="regular condensed">Roboto Flex regular condensed</h1>
  
  
  <label for="slider_weight">Weight</label>
  <input type="range" id="slider_weight" name="slider" value="100" min="100" max="1000" step="10">
  <span id="value_weight">100</span>
  <br>

  <label for="slider_width">Width</label>
  <input type="range" id="slider_width" name="slider" value="0" min="0" max="200" step="1">
  <span id="value_width">0</span>

<p id="testarea" contenteditable="true">Type something ...</p>

Google 변수 글꼴을 검색하는 중... 까다롭습니다.

현재의 구글 폰트 UI는 특별히 도움이 되지 않기 때문에 이 게시물을 적극 추천합니다.
Google 글꼴에서 가변 글꼴 링크를 가져오는 방법?

다음 사항을 염두에 두십시오.@font-face다음과 같이 강조된 요소에 글꼴 가중치를 자동으로 적용하지 않습니다.<strong>또는<h1><h2><h3>기타.

따라서 다음과 같이 예측 가능한 렌더링을 위해 원하는 글꼴 가중치를 지정해야 합니다.

/* Variable fonts: we can apply intermediate weight values - yay! */  
strong{
   font-weight: 623 
}

키워드 기반 가중치 또는 스타일(예: 세미볼드, 미디엄, 세미콘센트 등)에 의존하지 마십시오.

예를 들어, "중간"과 "반볼드"의 차이점은 무엇입니까?
글꼴 디자인, 글꼴의 무게 범위, 그리고 실제로 디자인 결정에 따라 다릅니다.
일부 글꼴은 기본적으로 "얇은" 또는 "가벼운" 글꼴보다 "굵은" 글꼴입니다(관련 게시물: 일부 Google 글꼴에는 세미볼드 글꼴 유형이 없습니다).

/* Roboto 400 is too bold for me – map default/regular weight 400 to 300 */  
body{
  font-family: "Roboto Flex";
  font-weight: 300;
}

/* Roboto 700 is not bold enough for me – map default/bold weight 700 to 1000*/  
strong{
  font-weight: 1000
}

/* ... OK a medium weight might be handy – lets say 625  */  
.medium{
  font-weight: 625
}

/* condensed or expanded styles: font-stretch < 100 = condensed; 
font-stretch > 100 = expanded; */
.condensed{
  font-stretch:0%;
}
.semi-condensed{
  font-stretch:50%;
}

.semi-expanded{
  font-stretch:200%;
}

.expanded{
  font-stretch:200%;
}

저처럼 Google의 서버를 누르지 않고 Roboto 글꼴을 로드해야 하는 경우 다음과 같이 표시됩니다.

/* Thin */
@font-face {
    font-family: 'Roboto';
    src: url(../fonts/Roboto-Thin.ttf) format('truetype');
    font-style: normal;
    font-weight: 100;
}

/* Light */
@font-face {
    font-family: 'Roboto';
    src: url(../fonts/Roboto-Light.ttf) format('truetype');
    font-style: normal;
    font-weight: 300;
}

/* Normal */
@font-face {
    font-family: 'Roboto';
    src: url(../fonts/Roboto-Regular.ttf) format('truetype');
    font-style: normal;    
    font-weight: 400;
}

/* Medium */
@font-face {
    font-family: 'Roboto';
    src: url(../fonts/Roboto-Medium.ttf) format('truetype');
    font-style: normal;
    font-weight: 500;
}

/* Bold */
@font-face {
    font-family: 'Roboto';
    src: url(../fonts/Roboto-Bold.ttf) format('truetype');
    font-style: normal;    
    font-weight: 700;
}

/* Black */
@font-face {
    font-family: 'Roboto';
    src: url(../fonts/Roboto-Black.ttf) format('truetype');
    font-style: normal;
    font-weight: 900;
}

그런 다음 필요한 경우 이탤릭체 변형에도 동일한 작업을 수행합니다.숫자 가중치에 이름을 매핑하는 방법에 대한 단서는 글꼴 가중치 설명서를 참조하십시오.로보토 폰트 다운론 링크입니다.

Transfonter를 사용하면 시간을 많이 절약할 수 있습니다. https://transfonter.org/

언급URL : https://stackoverflow.com/questions/28279989/multiple-font-weights-one-font-face-query

반응형

'programing' 카테고리의 다른 글

Animate scrollFirefox에서 상단이 작동하지 않음  (0) 2023.08.01
공기 흐름에서 동적 워크플로우를 만드는 올바른 방법  (0) 2023.08.01
mysql 치명적 오류: 버퍼 풀에 메모리를 할당할 수 없습니다.  (0) 2023.08.01
NSData 또는 UIImage에서 이미지 유형 찾기  (0) 2023.08.01
그룹화, 그룹화, 그룹화, 평균화  (0) 2023.07.27

'programing'의 다른글

  • 현재글다중 글꼴 가중치, 하나의 @ 글꼴-면 쿼리

관련글

댓글

티스토리툴바