Figma 디자인과 동일한 CSS 값을 사용하면 다른 값이 생성됩니다.

Question

Figma의 디자인을 구현하려고 하는데 항상 정확하지는 않습니다.

내가 만들고 싶은 입력 필드는 다음과 같습니다.

글이 얇으니 주의해주세요. Figma의 값은 다음과 같습니다.

으아악

또한 동일한 색상과 글꼴 두께를 사용했으며 400 대신 100을 사용해 보았지만 결과는 다음과 같습니다.

글이 더 두꺼워졌네요. 왜인지 모르겠습니다. 내 입력 필드에 대한 CSS 코드는 다음과 같습니다.

으아악

및 HTML:

으아악

내가 뭘 잘못했나요?

Answer 1

글꼴 두께 값을 변경한 후에도 동일한 결과가 나타나면 다음 문제 중 하나가 있음을 의미합니다.

1. 글꼴에 필요한 가중치 값이 없거나 가져오지 않았습니다(예: 100을 원하지만 @font 글꼴에 포함된 가장 가까운 값은 400입니다).
다른 규칙이 이를 무시하지 않는지 확인하세요.

마지막으로, 이 경우 자리 표시자의 모양을 변경하고 싶으므로 의사 요소 ::placeholder를 사용해야 합니다. 이렇게 하면 다른 문제의 위험 없이 자리 표시자의 스타일만 변경할 수 있습니다.

< /p>코드에서는 결과를 시뮬레이션하기 위해 자리표시자에 더 밝은 색상을 지정했습니다.

으아악 으아악

Answer 2

선택기에 font-family 속성과 그 값을 추가하고 사용 가능한 모든 글꼴 가중치가 포함되어 있으므로 여기서 사용하고 있는 CDN을 사용해 보세요.

으아악

으아악 으아악