안녕하세요.

웹폰트 사용하다 처음 느껴보는 문제라서 질문드려봅니다.

 

맥에서는 폰트를 선택하면 폰트가 아래쪽에 여백에 있는데, 

윈도우에서는 폰트를 선택하면 위족에 여백이 있습니다.

(브라우져 차이가 아닌거 같습니다. OS차이였습니다. 참고로 안드로이드 최신버전과 ios 최신버전에서는 맥과 같이 보임)

 

그래서 문제는 윈도우에서 봤을때가 문제인데

어떻게 해결을 해야할까요?

 

윈도우와 맥에서 원래 웹폰트가 다르게 보이나요?

 

user-agent가 윈도우일때만 css 조정해서 하는 방법뿐일까요?

 

 

스크린샷 2021-03-25 오후 3.58.04.png.jpg

 

스크린샷 2021-03-25 오후 3.59.59.png

  • Lv15
    os차이라고는 생각되지 않습니다.
    브라우저의 기본값차이로 보이는데요.
    vertical-align을 설정해서 브라우저 기본값을 이용하지 않게 하면 되지 않을려나요?
  • Lv15 ? Lv3
    윈도우에서 엣지,웨일,크롬 테스트를 해봤는데 모두 증상이 같습니다.
    윈도우도 3개의 컴퓨터에서 확인해봤는데 모두 동일 합니다.

    맥에서는 웨일 크롬 사파리를 테스트해봤는데, 모두 문제 없이 잘 돌아갑니다.

    그리고 vertical align은 이 문제와는 상관이 없는걸로 보입니다.
  • Lv24
    폰트마다 다르게 작동되는 것이 있습니다.

    예를들어 XETown을 기본적으로 접속해서 봣을때 맥OS에서는 좀 bold 효과를 준것 처럼 약간 굵고 흐릿흐릿한 형태로 글자가 나오는 반면 윈도우에서는 딱 픽셀정확하게 글자가 나오는것처럼요.

    이런 OS특성상 달라지는건 솔찍히 애매할 것 같고, 해당 폰트 제작자에게 문의해야할 내용이 아닌가 싶습니다.

    이미 윈도우랑 맥이랑 다르게 여백이 적용된다면 폰트를 적용하는 과정에서 문제가 있는 것이라 폰트 제작업체에서 어떻게 인식하게 해야할지를 잘 잡아줘야죠.
  • Lv24 ? Lv3
    아 제작업체에 문의를 해봐야겠군요.
    폰트 선택할때도 이런것도 고려를 해봐야겠네요 ㅠ
  • Lv37

    line-height 속성과도 관련이 있을 것 같습니다. 구글 웹폰트 예제는 line-height를 사용해서 꽤 많은 여백을 주고 있는데, 이 속성은 과거에 윈도우에서도 브라우저마다 여백 붙는 방향이 다르곤 했거든요.

  • Lv37 ? Lv3
    line-height 가 위아래 동일 하게 들어가서,,조절하기가 좀 어렵네요 ㅎ
    결국 line height 와 margin으로 윈도우에서만 조절했습니다. ㅠ