소개

항상 사이트를 만들 때 마주해야 하는 것이 'Font Family' 등의 폰트 관련 지정입니다. .

iOS에서 보면 명조체 표시가 되어 버린다

이미지 왼쪽과 같이 Futura Koyu(무료로 사용할 수 있는 Futura 돌아가기)를 적용시킨 디자인을 원래로 하고 있었을 경우, iPhone에서 확인하면 iOS상의 브라우저(Safari나 Chrome등)에서는 명조체가 적용되어 버리고 있어 합니다.



이것이라고 대부분 사이트의 분위기가 바뀌어 버려, iPhone에서 보는 유저가 신경이 쓰여 밤도 잠들 수 없는 곳입니다.

왜 이런 일이 일어났는가

위의 CSS 사양은 다음과 같습니다.

.top-about {
    padding-bottom: 0;
    font-family: "Futura Koyu";
}

이것은 sans-serif;의 설명을 빼는 것에 의한 것이라고 깨닫는데 예상보다 시간이 걸렸습니다. 거기서 이렇게 합니다.

.top-about {
    padding-bottom: 0;
    font-family: "Futura Koyu",sans-serif;
}

sans-serif를 작성했습니다. 이것으로 익숙한 그 버섯이 돌아온 안심감이 나왔습니다.
그만 그림자가 얇은 말미에 있는 녀석이므로, 없지만 오히려 경향이 있습니다만, 이 코는 폰트의 보험이므로 제대로 써 줍니다.

글꼴이 지정되지 않았을 때

iOS에서는 지정된 폰트가 모두 발견되지 않으면, 디폴트인 명조체를 지정해 버리는 것 같습니다. 유럽문 폰트로 serif계를 지정하고 있는 등, 명조체로 표시되어 좋다! 그런 경우가 아니면 sans-serif를 마지막에 덧붙이도록 하는 것이 좋을 것입니다.
언제나, 스루하기 쉽지만, 스마트폰, 또, Windows등의 경우, 폰트를 찾을 수 없는, web폰트를 읽지 않은 등의 자신의 개발 환경에서는 일어나지 않는 여러가지 일을 생각해 두지 않으면 안됩니다. (최근에는 상당히 편해졌다고 생각합니다만 옛날에는 Windows 대응 미워했습니다)

다양한 브라우저가 지정되지 않은 글꼴

여기서 다시 브라우저의 기본 글꼴을 확인하고 싶습니다.
만약 폰트를 지정하지 않았을 경우에 무엇이 표시되는지 의외로 모르기도 하기 때문에 정리해 보았습니다.


브라우저
글꼴


Safari
Times/히라기노 명조 ProN

Firefox
히라기노 코너 고딕 ProN

Chrome
히라기노 코너 고딕 Pro

Internet Explorer
Times New Roman/MS P 고딕

오페라
히라기노 명조 Pro




짧은 단어로 보면 위화감은 적지만, 문장으로 보면 상당히 스트레스가 나오는 것도 있습니다.

덤

2016년에 좋았다고 하면 web 폰트 서비스 최대 손의 (자신 중에서) GoogleFonts 이 올 6월에 디자인을 대폭 리뉴얼한 것일까요. 사이트 전체에 머티리얼 디자인이 마음껏 느껴지게 되어, 이전의 모야한 시대착오감이 단번에 해소되었습니다.

또, 테마 칼라를 커스터마이즈 할 수 있게 되어, 폰트를 지정하기 전에 여러가지 배경으로 이 폰트는 빛나는 것인가라고 하는 것을 시험할 수 있게 되어 있습니다. 고맙습니다.


그러나 더미 텍스트가 'Grumpy wizards make toxic brew for the evil Queen and Jack.'

어쨌든! GoogleFonts를 사용한다면, Serif, Sans-serif 등에 맞게 원래 끝에 최적의 글꼴을 지정해 주므로 위에서 쓴 것은 신경쓰지 않고, 굉장히 개발해도 문제 없습니다 .


↑이런 느낌으로 마음대로 온다.

그럼 좋은 글꼴 생활을!