웹페이지에서 사용된 글꼴 확인

상황

현재 next.j를 배우고 있는 중입니다. 넥스트팀(https://nextjs.org/learn)에서 제작한 강좌를 수강하고 있습니다.

글꼴 및 이미지 최적화에 관련된 섹션이 있습니다.
솔직히 저는 웹 페이지의 특정 요소에 어떤 글꼴이 사용되는지, 글꼴에 대해 많은 관심을 기울인 적이 없습니다.
하지만 이 자료를 통해 당신도 그렇게 할 수 있다는 것을 깨달았습니다. 특정 요소에 어떤 글꼴이 사용되는지 확인할 수 있습니다. 페이지에 둘 이상의 사용자 정의 글꼴이 있을 수 있으며 이는 유용할 수 있습니다.

저는 Chrome을 기본 브라우저로 사용하고 있기 때문에 devtools를 열고 사용된 글꼴을 확인했습니다.

이건 꽤 열악하고 정보도 별로 없어 보였습니다.

하지만 Firefox에서 동일한 작업을 수행했는데 Firefox에는 글꼴과 관련하여 훨씬 더 많은 옵션이 있는 것 같습니다. 편집기를 통해 크기, 줄 높이, 간격, 무게를 변경할 수 있습니다. 이는 특히 특정 요소에 가장 적합한 글꼴 속성을 찾으려고 할 때 매우 유용해 보입니다.

내 생각

글꼴에 관한 이러한 조사 결과는 과거에 레이아웃에 문제가 있었을 때 Chrome보다 Firefox에서 훨씬 더 나은 디버깅을 수행할 수 있다는 사실을 상기시켰습니다.
Firefox는 FE 개발을 Chrome보다 더 유연하게 만들기 위해 CSS에 더 많은 관심을 기울이고 있는 것 같습니다. 다음번에 CSS 작업을 할 때 이 점을 고려해서 Firefox를 기본으로 사용해 보아야 할 것 같습니다!

건배. 좋은 하루 보내세요!

위 내용은 웹페이지에서 사용된 글꼴 확인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!