폰트 사이즈에 대해 질문드립니다.
본문
아래 코드와 같이 버튼에 폰트어썸 폰트를 넣었습니다.
버튼에는 width 100%과 max-width는 한 300px 가량을 넣는다고 했을때
i태그에 지정한 폰트사이즈에도 width 100%과 같은 속성을 지정해서
버튼 가로사이즈에 따라서 폰트도 가변이 됬으면 합니다.
어떻게 해야할까요?
<button type="button" class="btn btn-primary btn-lg vfl_join_btn">
<i class="fa fa-futbol-o" aria-hidden="true" style="font-size: 30vw;"></i>
<h1>Large button</h1>
</button>
답변 2
font-stretch 라는 속성이 있는데 아직까지는 대부분의 브라우저 미지원 상태이고
중요한 것은 부모 width 에 맞춰 유동적으로 폰트 사이즈가 가변이 되어야 한다면
height 도 같이 늘어나야 정상적인 폰트 형태를 띄게 될것인데,
width 만 늘어나는 형태라면 비정상적으로 가로만 늘리는 형태가 되어 버리기 때문에
균형이 망가지고 찌그러진 형태의 폰트가 될 것입니다.
폰트의 크기를 조절하면 알아서 부모가 자동적으로 조절되는 형태를 지향해야 되는게 아닌가 생각되며
논외의 답변으로 letter-spacing 이라는 속성이 있음을 말씀드리고 싶습니다.
letter-spacing 속성은 단순하게 단어 하나하나 사이의 간격을 조정하는 속성입니다.
if else를 사용하여 width가 일정 픽셀 이하면 font-size가 몇이고 아닐 경우 else로 사이즈 제어해 주시면 될듯 한데요
저의 경우 이미지 크기를 제어 할때 위 방법으로 사용 했었습니다
저의 경우 이미지 크기를 제어 할때 위 방법으로 사용 했었습니다
답변을 작성하시기 전에 로그인 해주세요.
