dynamic-subset font-wieght:600 사용시 폰트 깨짐 #68
Comments
|
@hyohyoooo 안녕하세요! URL이 잘못된 것 같은데 혹시 확인 가능하실까요?
|
안녕하세요! |
|
@hyohyoooo
|
눈누는 현재 몇개월 전에 릴리즈된 구버전을 지원하고 있어 추천드리진 않고 있습니다. 혹시 아래와 같이 직전버전을 임포트 하고, 폰트 패밀리를 설정하실 수 있나요? @import url('https://cdnjs.cloudflare.com/ajax/libs/pretendard/1.2.2/static/pretendard.css'); /* 이전버전 프리텐다드 */
font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', Pretendard, Roboto, 'Segoe UI', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif; |
|
혹 1.2.2 버전(위 URL)에서 이슈가 해결되면, 다이나믹 서브셋이 아닌 일반 버전으로 임포트 해보세요. @import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css'); |
|
계속 해결이 되지 않는 경우, 해당 URL을 본 이슈에 업로드 해주시면 확인 해 보겠습니다. |
|
@kms0219kms 1.2.9 버전이 나온 적이 있었던가요? 이 저장소에는 그런 태그가 없는 것 같고, cdnjs와 jsdelivr에서도 여전히 1.2.2 버전이 최신으로 표시되고 있습니다. #65 이슈 때문에 주요 CDN들이 1.3.0을 가져가는 데 실패하는 바람에 일부 서브셋 파일이 누락되거나 잘못 올라간 상태로 서비스중인 것은 아닌지 의심되네요. |
|
안녕하세요! 미리 답변해주신 @hiddenest님과 @kms0219kms님께 감사드립니다! @kms0219kms님께서 말씀해주신 것처럼, 현재 1.3.0 버전에서 UNPKG와 cdnjs를 통한 서빙은 #65 이슈로 잠시 사용이 불가능하고, jsDelivr를 통한 사용만 정상적으로 가능한 상황입니다. 그러나 말씀하신 문제 같은 경우 다이나믹 서브셋으로 제공하는 Pretendard를 사용하는 Flex의 경우를 보았을 때 제대로 작동하고 있고, Pretendard에서 제공하는 jsDelivr URL 또한 정상적으로 작동하는 것으로 보아 디렉터리에서 발생하는 문제는 아닌 듯합니다. 혹시나 unpkg와 cdnjs를 사용하고 계시다면, #65 이슈가 해결되기 전까지는 당분간 1.3.0이 아닌 1.2.2 버전으로 사용하시는 것을 추천드립니다. 또한 @kijin님께서 알려주신 것처럼 1.2.9 버전은 없고, 1.3.0 버전 이전은 1.2.2 버전이 맞습니다 😂 참고 부탁드려요! |
태그를 잘못 확인했네요. 1.2.2로 사용해 주시는것이 정확합니다. |
|
jsDelivr를 이용한 Pretendard 사용에는 문제가 없어 이 이슈는 종결로 처리하겠습니다. 혹시나 문제가 여전히 발생한다면 이 이슈를 다시 열어 언제든지 알려주세요! |
|
@orioncactus jsDelivr에서도 여전히 문제가 있습니다. 며칠 전 아래의 1번 URL에서 폰트를 로딩했을 때 일반적이지 않은 font-weight(400, 600 등)의 일부 글자가 이상하게 표시되는 현상이 있었고, 2번 URL로 변경하자 증상이 사라졌습니다. 실제로 두 파일의 크기와 내용이 다릅니다. jsDelivr에서는 1.2.2 버전이 최신으로 표시됨에도 불구하고, 버전 태그 없이 요청하면 1.3.0 버전을 제공하고 있습니다. (npm 용량 문제로 새 테그를 인식하지 못하는 듯)
그러나 1.3.0 버전의 문제라기보다는, 장기간 캐싱되는 CDN을 사용하는 것 자체가 원인으로 생각됩니다. 이 문제를 재현하기 어려운 이유는 사용자 브라우저의 캐시 상태에 따라 증상이 다르기 때문입니다. dynamic subset 방식의 특성상 수백 개의 폰트 파일 중 필요한 것만 다운받아서 사용하므로, 과거에 어떤 내용의 페이지를 열람했는지에 따라 사용자마다 서로 다른 파일을 캐싱하여 갖고 있게 됩니다. 그런데 만약 새 버전에서 각각의 subset에 해당하는 코드 포인트의 범위가 달라졌다면, 예전 버전의 폰트 파일을 캐싱해 놓은 브라우저는 그 파일과 맞지 않는 코드 포인트를 찾으려다가 실패하고 다른 폰트로 대체하게 됩니다. 흔하지 않은 코드 포인트와 font-weight의 조합일수록 이런 현상이 더 자주 나타날 테고요. 즉, 버전 태그를 붙이지 않으면 CDN에서 제공하는 URL은 그대로이기 때문에, 예전 버전의 subset 파일과 새 버전의 subset 파일들이 사용자 브라우저의 캐시 내에서 뒤섞여 랜덤으로 문제를 일으키는 것 같습니다. 개발자도구를 켜고 캐시를 비우고 증상을 확인하려고 하면 당연히 재현이 안 되지요. CDN이 아닌 일반적인 서버에 폰트를 올려놓고 테스트해도 마찬가지로 재현이 안 되고요. 캐시 특성상 시간이 약이겠지만, 앞으로 또 이런 문제가 발생하는 것을 막으려면 dynamic subset 파일명에 버전을 붙여서 버전이 바뀔 때마다 캐시를 무효화시켜 주는 방법이 가장 확실할 듯 하고, 기존 subset이 담당하는 코드 포인트의 범위를 변경하지 않고 새로운 subset을 추가하기만 하는 방법도 있겠습니다. 저는 서버 엔지니어이지 폰트 개발자가 아니므로 후자가 얼마나 어려울지는 모르겠네요.^^ |
|
@kijin 안녕하세요! 이렇게 소중한 의견을 남겨주셔서 감사드립니다. 저도 관련 내용을 한번 정리해보았습니다.
이야기가 길어졌는데요, 정리하면, jsDelivr를 통한 Pretendard를 사용하고 있는 서비스에서 @v1.3.0과 같이 버전 태그를 붙여달라고 안내하는 것이 백 번 맞지만, jsDelivr를 통한 Pretendard 다이나믹 서브셋을 사용하는 대부분의 서비스에 버전 태그를 붙이도록 안내할 수 있을까에 대한 걱정입니다 🥲 따라서 일단은 배포 후 jsDelivr에서 반영이 늦지 않도록 에셋 단위까지 purge하는 식으로 관리하고, 다음 업데이트에서 확인할 때 이전에 Pretendard 다이나믹 서브셋을 불러온 사용자가 새로 업데이트된 다이나믹 서브셋을 불러올 때 로컬에 남아있는 캐시로 인한 이슈가 있다면 그때는 근본적인 문제 해결을 위해 방법을 알아보려고 합니다. 긴 내용 읽어주셔서 감사합니다! |
|
@orioncactus 자세한 설명 감사합니다. jsDelivr에서 자체적으로 캐싱되는 것은 수동으로 purge하실 수 있지만, jsDelivr에서 css 및 폰트 파일을 다운로드한 사용자 브라우저의 캐시 기간은 그것보다 훨씬 깁니다. 오늘 기준으로 버전 태그가 없는 URL은 7일, 버전 태그가 붙은 URL은 최대 1년간 캐시에 보관하도록 지시하는 헤더가 붙는 것으로 보입니다. 문제가 발견된 지도 벌써 일주일 가량 지났으니 아마 곧 자연적으로 해결되지 않을까 싶네요.^^ 앞으로는 버전 태그를 붙여서 사용하도록 안내해 주신다면 비슷한 문제가 다시 발생하는 것을 피할 수 있을 것 같습니다. 단, 애써 만드신 새 버전을 더 많은 사람들이 빨리 사용해 준다면 좋을 텐데... 버전 태그를 붙인다면 그 부분에서는 다소 아쉬움이 있겠네요. 멋진 폰트를 배포해 주셔서 다시 한 번 감사드립니다. |
|
오..! 버전 태그가 없는 URL은 캐시 기간이 7일로 되어있군요! 소중한 정보를 공유해주셔서 감사합니다. Pretendard를 보다 안정적으로 제공할 수 있는 다양한 방법을 확인해보겠습니다. 이렇게 의견을 남겨주셔서 다시 한 번 감사드립니다! |
https://cdn.jsdelivr.net/gh/hiddenest/pretendard@feature/dynamic-swap/dist/web/static/pretendard-dynamic-subset.css
다이나믹 서브셋을 임포트했을시
font-weight:600; 이 깨지는 현상이 발생합니다.
The text was updated successfully, but these errors were encountered: