CSS의 font-family 값 수정

hyunbinseo commented 2 years ago

font-family에서 ‘’ 기호를 사용하면 SUIT 글꼴이 적용되지 않습니다.

- * {font-family: ‘SUIT’, sans-serif;}
+ * {font-family: SUIT, sans-serif;}

- * {font-family: ‘SUIT Variable’, sans-serif;}
+ * {font-family: SUIT Variable, sans-serif;}

다음 HTML을 이용해 확인했습니다. (2종)

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/static/woff2/SUIT.css" rel="stylesheet">
    <style>
      * {
        font-family: SUIT, sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>제목</h1>
    <p>본문</p>
  </body>
</html>

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/variable/woff2/SUIT-Variable.css" rel="stylesheet">
    <style>
      * {
        font-family: SUIT Variable, sans-serif;
      }
    </style>
  </head>
  <body>
    <h1>제목</h1>
    <p>본문</p>
  </body>
</html>

다음 웹 브라우저에서 확인했습니다. (2종)

Chrome 버전 107.0.5304.87 (64비트)
Firefox 버전 107.0b7 (64비트)

다음 운영체제에서 확인했습니다.

Windows 11 Pro 버전 22H2 (OS 빌드 22621.755)

sun-typeface commented 2 years ago

말씀주신 내용으로 테스트 해보았으나 quoted 여부와 무관하게 정상 렌더링 되는 것으로 확인됩니다.

macOS 최신버전에서의 Safari, Chrome
Windows 10에서의 최신 버전 Edge, Chrome

https://www.w3.org/TR/2018/REC-css-fonts-3-20180920/#propdef-font-family 에 의하면 SUIT는 폰트명에 숫자나 띄워쓰기가 없으므로 폰트명을 quote로 감싸던 아니던 무관하게 작동해야 하는 것 같습니다. (저도 깊게 생각해본적은 없으나 일반적으로 generic-family와 구분 짓기 위해서 quote로 감싸고 있는 것 같습니다.)

아래 URL에서 두번째, 세번째가 SUIT로 렌더링 되는지 다시 한번 확인 부탁드립니다. https://sunn.us/private/test.html

hyunbinseo commented 2 years ago

올려주신 테스트 페이지를 확인했습니다. 두, 세 번째가 SUIT로 렌더링 됨을 확인했습니다.

README와 홈페이지의 따옴표가 원인인 것 같습니다. `를 '로 수정하면 문제가 해결됩니다.

- * {font-family: ‘SUIT’, sans-serif;}
+ * {font-family: 'SUIT', sans-serif;}

https://github.com/sunn-us/SUIT/blob/main/README.md?plain=1#L27

- * {font-family: ‘SUIT Variable’, sans-serif;}
+ * {font-family: 'SUIT Variable', sans-serif;}

https://github.com/sunn-us/SUIT/blob/main/README.md?plain=1#L36

다음 HTML을 확인해 봐 주시겠어요?

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <link href="https://cdn.jsdelivr.net/gh/sunn-us/SUIT/fonts/static/woff2/SUIT.css" rel="stylesheet">
  <style>
    .c1 {
      font-family: SUIT, sans-serif;
    }

    .c2 {
      font-family: 'SUIT', sans-serif;
    }

    .c3 {
      font-family: ‘SUIT’, sans-serif;
    }
  </style>
</head>

<body>
  <pre>font-family: SUIT, sans-serif;</pre>
  <h1 class="c1">SUIT</h1>
  <pre>font-family: 'SUIT', sans-serif;</pre>
  <h1 class="c2">SUIT</h1>
  <pre>font-family: ‘SUIT’, sans-serif;</pre>
  <h1 class="c3">SUIT</h1>
</body>

</html>

sun-typeface commented 2 years ago

확인 감사드립니다. 말씀주신대로 readme와 홈페이지 예제코드에서 해당 문자를 수정했습니다. 감사합니다! 👍

sun-typeface / SUIT

CSS의 font-family 값 수정 #4