피 단어 휴식

가 글꼴 크기 등 뷰포트/윈도우의 폭의 크기를 조정하는 동안 어떤 단어도 휴식이 없다는 화면 너비 사이의 수학적 관계가 존재 하는가 글꼴 크기 폭스 바겐을 사용하는 동안? 예를 들어피 단어 휴식

, I는 16px에게 단락의 폰트 크기를 설정하면 여기서

LOREM의 Ipsum 제품의 슬픔이 AMET 앉아 reads- 단락, consectetur의 adipisicing의 ELIT의 첫 줄. 내 뷰포트의 폭의 크기를 조정한다면 뷰포트의 폭이 글꼴 크기는 px 단위로 설정되어 있기 때문에 문장을 수용하기 위해 작은 경우

는 경우 단어 휴식있을 것입니다.

단위가 vw으로 설정되어있는 경우 뷰포트 너비의 크기를 조정할 때 font-size가 증가/감소하기 때문에 텍스트가있는 이미지의 크기를 조정한다고 가정합니다. 이것을 달성 할 수 있습니까?

출처

2016-11-14 Siddharth Thevaril

글꼴 크기 설정을 재정의 할 수 있습니다 사람, 많은 브라우저가 기본 최소 글꼴 크기를 가치, 그래서 기회는 당신의 실제 문제가 이런 식으로 해결되지 않을 수 있습니다. – andi

이것은 문제가되지 않으며, 이것을 달성하고 싶습니다. –

"수학적 관계"에 정확한 텍스트를 포함시켜야합니다. 따라서 비율을 결정하기 위해 다양한 글꼴 크기로 텍스트의 길이를 측정해야합니다. 고정 너비 글꼴을 사용하는 경우에는 직접적인 상관 관계가 더 많을 수 있지만 여전히 텍스트에 포함 된 문자 수에 따라 다릅니다. – andi

컨테이너를 특정 vw 너비로 설정 한 다음 글꼴 크기를 vw 값으로 설정할 수 있습니다. 이 두 가지를 사용하면 브라우저에서 "브라우저에서 사용하기로 결정한 글꼴"을 사용하지 않고 글꼴이 명시 적으로로드되므로 브라우저에서 크기를 조절할 수 있으므로 CSS 크기가 "Times New Roman"이 아니므로 해당 폰트의 어떤 버전이 실제로 사용 될지 궁금해 지므로 폰트 메트릭이 필요로하는 것임을 믿을 수 없습니다. 그래서 :

부하 @font-face 규칙
을 통해 특정 글꼴이 컨테이너는 컨테이너가 vw 단위의 글꼴 크기를 지정해야합니다 vw
표현 폭을 갖도록 설정되어 있는지 확인합니다.

CSS :

.rs { 
    width: 50vw; 
    background: lightgreen; 
    font-family: lato; 
    font-size: 3.3vw; 
}

HTML :

라이브 예를

.... 
<link href="https://fonts.googleapis.com/css?family=Lato" 
<div class="rs"> 
    This is text This is text This is text T 
</div>

: http://jsbin.com/januxevebe/edit?html,css,output

출처

2016-11-14 17:59:15

아! 그 놀라운! 나는'vw' 대신'px'에서 너비를 정한 실수를했습니다. 이것은 제가 원했던 것입니다! Upvoted! –

피 단어 휴식

답변

관련 문제