어느 날 아침 어떤 분이 디자이너에게 '성추행'을 당했던 일이 아직도 생생하게 기억납니다. 오전 내내 고민했던 프로젝트(PC와 모바일)의 글꼴 문제 때문이었습니다. 디자이너는 글꼴 효과가 디자인 초안과 일관성을 유지한다고 주장했습니다. 그 순간 말문이 막혔는데 그러고 보니 다들 작품의 퀄리티를 위해 하는 거니까 진정하고 반성해야 할 것 같아서 오늘 오후에 전해드리고 싶은 주제는 '탄생' 이었습니다: 폰트 설정 CSS.

"CSS의 글꼴"에 대해 이야기하는 것은 흔한 주제입니다. 디자인과 프런트엔드를 해본 어린이 신발은 몇 가지 "미스터리"를 알고 있을 것입니다. 일상 작업에서 프로젝트를 완료할 때 디자인 초안부터 페이지의 최종 출력 효과까지 글꼴에 관한 한 주의 깊은 아이들은 수행해야 할 세부 작업이 많다는 것을 알게 될 것입니다. 프로젝트 자체의 매우 까다로운 요구 사항을 기반으로 합니다. 오늘 오후에는 설정(font-family)과 두께(font-weight)라는 두 가지 측면에 대해 논의하겠습니다.

전역 스타일을 작성할 때 기본 글꼴을 설정합니다. 예:

위 설정에서 사각형 글꼴이 없으면 페이지에서 선호하는 글꼴은 사각형 글꼴입니다. 컴퓨터에 있는 글꼴, 글꼴은 Microsoft Yahei 등...

일부 중국어 글꼴을 설정할 때 일부 어린이(과거의 나)는 중국어를 직접 사용하는 것을 좋아하지만 실제로는 그렇지 않습니다. 매우 좋습니다. 그래서 통일성으로 돌아가는 것이 좋습니다. 영어에서 중국어를 영어로 변환할 때 일반적으로 사용되는 글꼴은 다음과 같습니다.

쉽게 참조할 수 있도록 모아두실 수 있습니다.

제가 아는 한, PC이든 모바일이든 현재 디자이너의 기본 글꼴은 일반적으로 중국어의 경우 "Microsoft Yahei", "Microsoft Heilong", "Square Font"에 많이 사용됩니다. 선택 항목 중 일반적으로 사용되는 항목에는 Arial 등이 포함됩니다. PC 장비 부족으로 인해 현재는 WINDOWS만 사용 가능하며, 디자인 시안과 효과는 크게 다르지 않습니다. 그러나 때때로 우리는 다양한 모바일 장치에 제공되는 기본 글꼴을 이해하지 못하기 때문에 모바일 측면에서 얽히게 됩니다. 프론트엔드 공성 엔지니어로서 이 문제에 대해 디자이너와 씨름할 때 그들과 논쟁할 수 있는 몇 가지 증거를 확보해야 합니다. 다음과 같습니다:

기본 중국어 글꼴은 Heiti SC입니다.

기본 영어 글꼴은 Helvetica입니다.

기본 디지털 글꼴은 HelveticaNeue입니다.

Microsoft Yahei 글꼴 없음

기본 중국어 글꼴은 Droidsansfallback입니다.

기본 영어 및 디지털 글꼴은 Droid Sans입니다.

Microsoft Yahei 글꼴 없음

기본 중국어 글꼴은 Dengxian(Founder isolinear)입니다.

기본 영어 및 디지털 글꼴은 Segoe입니다.

Microsoft Yahei 글꼴은 없습니다.

그럴 수 있습니다. ios인지, android인지, wp인지 알아냈습니다. 시스템에 Microsoft Yahei 글꼴이 없습니다. 그런 다음 Microsoft Yahei 글꼴의 효과와 각 시스템의 기본 글꼴의 효과를 비교하기 위해 작은 테스트를 수행했습니다. 페이지에 사용된 글꼴은 육안으로 읽기 어렵습니다. 차이점은 제품 경험에 거의 영향을 미치지 않습니다.

각 휴대폰 시스템에는 고유한 기본 글꼴이 있으며 그 중 어느 것도 Microsoft Yahei를 지원하지 않습니다.

특별한 요구 사항이 없으면 휴대폰에서 중국어 글꼴을 정의할 필요가 없으며 시스템 기본값이 사용됩니다.

Helvetica는 영어 글꼴과 디지털 글꼴에 모두 사용할 수 있으며 세 시스템 모두에서 지원됩니다.

좋습니다. 증거가 결정적입니다.

디자이너가 아름다운 din1451a, akzidenzgrotesk-cond 등과 같은 일부 특수 영어 글꼴을 사용해야 하는 경우 이를 변환한 다음 @font-face로 참조해야 하므로 이 방법에 대해서는 할 말이 많지 않습니다. easy

글꼴 설정(font-family) 문제에 대해 많이 이야기해 보겠습니다. 다음 질문: CSS 글꼴 두께.

먼저 다음 표와 같이 Font-Weight의 기본 속성값을 이해해 봅시다.

400은 Normal에 해당하고, 700은 Bold에 해당합니다. .

상속은 글꼴 두께가 상위 요소에서 상속되어야 함을 지정합니다.

하지만 효과는 뚜렷하지 않습니다. 글꼴을 변경해 보세요. 하지만 흔히 볼 수 있는 중국어 글꼴 중에서 볼드체가 더 두꺼운 것 같습니다. 간단한 예를 들어 WINDOWS 시스템이 PC 측에 미치는 영향을 살펴보겠습니다.

글꼴의 두께는 값 설정에 따라 쉽게 조정할 수 있습니다. 주의깊은 아이들은 글꼴 무게: 901을 설정하면 어떤 일이 일어날지, 글꼴 무게: 99를 설정하면 어떤 효과가 있을지 알아냈습니다. 하하 _, 말하지 않겠습니다. 시도해 볼 수 있습니다. 회사가 열악하고 고급 장비를 제공하지 않습니다. 다른 시스템에서 PC 볼링 효과를 테스트해 볼 수 있습니다. 제가 이야기하고 싶은 부분은 모바일 측면입니다.

Android와 IOS의 초기 버전에 익숙하다면 글꼴의 굵은 글꼴 속성이 매우 지저분하고 지원이 그다지 좋지 않다는 것을 알게 될 것입니다. .. 직설적으로 말하면 시스템 BUG입니다. 여기서는 이러한 오래된 문제에 대해 논의하지 않고 먼저 살펴보고 싶습니다. _ .

다양한 장치 및 시스템에서 CSS 글꼴 설정(font-family)과 두께(font-weight)의 차이는 특히 모바일 단말기의 경우 프로젝트를 개발할 때 프런트엔드 엔지니어에게 불편을 끼칠 수 있습니다. 예를 들어, 다섯개 별, 화살표, 점, 화살표 등의 특수 문자를 사용하고 글꼴을 사용하여 직접 효과를 설정하고 싶은 경우 최종 효과가 만족스럽지 않을 것입니다. 대안은 CSS3, 그래프, base64 등을 사용하는 것입니다.

좋아요, 그게 전부입니다. 모두에게 도움이 되기를 바랍니다.