자, 코딩하시는 분들이 아마 한 번쯤은 들어보셨을
font-family는 무엇일까요?
(못 들어보셨어도 괜찮습니다 :)
font-family란 무슨 폰트로 지정해줄지 정해주는 코드입니다!!
자, 그럼 font-family는 어떤 형식으로 쓸까요?
font-family: 'Noto Sans', sans-serif;각 언어마다(css, React Native....)
font-family가 조금씩 다르겠지만, 아마 위와 비슷할 겁니다.
우선 이 코드는 'Noto Sans'라는 폰트와 산세리프라는 폰트를 쓴다는 의미입니다.
(물론 'Noto Sans'는 따로 먼저 <link>나 @import로 불러와주어야 합니다.)
span {
font-family: 'Noto Sans', san-serif;
}이렇게 해주면, span 태그 안에 있는 글자들은 모두 Noto Sans와 san-serif체가 적용될 겁니다.
(물론, 따로 거기서 font-family를 지정해주지 않았을 때 말이죠.)
(index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<span>Hellooo :D</span>
</body>
</html>
(style.css)
span {
font-family: 'Noto Sans', san-serif;
}그런데, 만약 위와 같은 코드로 작성했을 때,
정말로 'Noto Sans'폰트와 san-serif 폰트가 모두 적용되는 걸까요?
(Noto Sans를 불러왔다고 가정했을 때)
정답은
NO입니다.
왜냐하면, font-family에서는 앞에서부터 폰트를 쓰기 때문입니다.
그 글자를 지원하면, 맨 앞에 있는 'Noto Sans'가 적용이 되고, san-serif는 적용이 되지 않는 것입니다.
반대로, 그 글자를 'Noto Sans'가 지원하지 않으면, 그 글자는 san-serif체가 적용이 되는 것이죠.
이 상황에서는, Hellooo :D라는 말을 'Noto Sans'폰트로 표시할 수 있기 때문에,
'Noto Sans'가 적용되어 보입니다.
그러면, 영어만 지원하는 폰트를 제일 앞에 쓰고, 한글과 영어 모두 지원하는 폰트를 2번째로 쓸 때,
어떻게 될까요?
우선, 첫 번째 폰트가 영어를 지원하기 때문에, <span>태그 안의 말 중 영어는 모두 첫번째 폰트가 적용될 겁니다.
그리고, <span> 안에 한글이 있다면, 그 한글만 두 번째 폰트가 적용될 거예요.
이렇듯, 순서에 따라 폰트의 우선순위가 정해진다고 볼 수 있을 것 같습니다!!
도움이 되셨으면 좋겠습니다!!
:D
'배운 것들 > html,css,js' 카테고리의 다른 글
| [JS] tilt.js 사용하기 (0) | 2021.02.22 |
|---|---|
| [CSS] -prefix-free 사용하기 (0) | 2021.02.14 |
| [CSS] Vendor Prefix란? (0) | 2021.02.14 |
| [html] link의 종류 (0) | 2021.02.07 |
| h 태그란? (<h1>, <h2>, <h3>.....) (0) | 2021.02.01 |