fix: 폼 조작기가 브라우저 기본 서체로 떨어지던 문제
버튼·입력칸이 Pretendard가 아니라 Arial 13.33px으로 그려지고 있었다. 폼 조작기는 CSS 명세상 `font`를 상속받지 않는데 그걸 되돌리는 규칙이 없어, 아무도 서체를 지정하지 않은 자리는 브라우저 기본값이 이겼다. 그래서 제목·본문은 Pretendard인데 그 옆 버튼만 다른 서체로 나와 한 화면에 두 서체가 섞였다. app/globals.scss에 조작기 리셋을 한 번 둔다. 타입 선택자(0,0,1)라 클래스로 서체·크기를 정한 곳은 그대로 이긴다. 확인한 범위: - @fox 컴포넌트: 글자 크기(17/15/13px)·상자 크기(360×40) 모두 그대로. 서체를 지정하지 않았던 FoxInput의 지우기 버튼만 Arial → Pretendard로 바뀐다(아이콘만 있어 보이는 변화 없음). - 카탈로그: Arial이던 버튼 49개가 전부 Pretendard로. 크기·굵기는 유지되고 높이만 1px 줄어드는데 서체가 바뀌면서 `line-height: normal` 계산이 달라진 결과다. - 로그인 화면: 조작기 4개 모두 Pretendard. Arial 0건. 폰트 파일 자체와 시안 대조는 이상이 없었다 — 파일은 정품 Pretendard 400/600/700/800이고, 탭 label(20px/800)의 잉크 폭이 자간 반영 시 42px로 Figma 렌더와 같다. Co-Authored-By: Claude Opus 5
@fe7f656d0a60fcbd1267b3998da3faa88f27435c
--- app/globals.scss
+++ app/globals.scss
... | ... | @@ -55,6 +55,19 @@ |
| 55 | 55 |
--app-font-sans: "Pretendard"; |
| 56 | 56 |
} |
| 57 | 57 |
|
| 58 |
+// 폼 조작기는 CSS 명세상 `font`를 상속받지 않아, 아무도 지정하지 않으면 브라우저 기본값 |
|
| 59 |
+// (macOS 크롬 기준 Arial 13.33px)이 이긴다. 그래서 제목·본문은 Pretendard인데 그 옆 버튼만 |
|
| 60 |
+// 다른 서체로 나오는 일이 생긴다. 여기서 한 번 되돌린다. |
|
| 61 |
+// |
|
| 62 |
+// 타입 선택자(특이도 0,0,1)라 클래스로 서체·크기를 정한 곳은 그대로 이긴다 — @fox 컴포넌트도 |
|
| 63 |
+// 앱의 module.scss도 영향받지 않고, 아무도 정하지 않은 자리만 앱 서체를 따라온다. |
|
| 64 |
+button, |
|
| 65 |
+input, |
|
| 66 |
+select, |
|
| 67 |
+textarea {
|
|
| 68 |
+ font: inherit; |
|
| 69 |
+} |
|
| 70 |
+ |
|
| 58 | 71 |
// 앱 셸 — 루트 레이아웃이 뷰포트 높이를 채우고 세로로 쌓이는 구조. |
| 59 | 72 |
// 푸터를 바닥에 붙이거나 본문 영역만 스크롤시키는 화면들이 이 전제에 기댄다. |
| 60 | 73 |
html, |
Add a comment
Delete comment
Once you delete this comment, you won't be able to recover it. Are you sure you want to delete this comment?