타이포 그라피 (글자)의 특정 부분이 창의 너비/높이에 반응합니까?

Question

CSS를 통해 이와 같은 것이 가능할 지 모르겠지만이 커뮤니티의 재능있는 사람들은 여러 번 나에게 틀린 것으로 입증되었습니다. 그래서 여기에 우리가 간다!

나는 O, U 문자의 특정 수평 부품 수있는 경우 궁금 해서요, 그 위치를 유지하면서 E는 윈도우의 폭으로 응답 할 수 있습니까? 아래 이미지에서 반응 형 타이포그래피가 윈도우 스케일에 어떻게 반응 하는지를 보여주었습니다. 설정 유형은 페이지 줄 바꿈 내에 배치되고 창 중간에 세로로 배치됩니다.

나는이 문제를 어떻게 달성 할 수 있는가? 그리고 어떤 포맷으로 작업해야합니까 (svg, 도형 등)

미리 감사드립니다!

Answer 1

당신은 단지 오버 플로우와 사업부 내부의 중첩 요소를함으로써 간단하게 할 수있는 확장 된 문자 모양이 SVG로 만들었으며 왼쪽 div에 숨겨져 있습니다. 사용자가 창 크기를 조정하면 오른쪽 div가 미끄러 져 늘어난 부분이 나타납니다. 예.

<div id="clipper"> 
<svg id="leftpart" x="0px" y="0px" width="30px" height="150px"> 
    <rect x="0" y="0" width="30" height="150" fill="red"/> 
</svg> 

<svg id="rightpart" x="0px" y="0px" width="2000px" height="150px"> 

    <rect x="0" y="0" width="2000" height="30" fill="black"/> 
    <rect x="0" y="60" width="2000" height="30" fill="black"/> 
    <rect x="0" y="120" width="2000" height="30" fill="black"/> 
</svg> 
</div> 


#clipper{ 
    position: absolute; 
    top:200px; 
    left:200px; 
    width:40%; 
    overflow: hidden; 

} 

#rightpart { 
    position: relative; 
    z-index:1; 
} 

#leftpart { 
    position: absolute; 
    z-index:2; 

} 

Answer 2

다음은 화면 너비에 따라 SVG 요소 크기를 조정하는 예제입니다. 이것은 수정하려는 캐릭터 요소 (예 : U의 바닥면)를 선택하는 방법에 달려 있습니다. 이 예제에서 rectangle 요소는 고유 한 ID를가집니다.

HTML :

<svg version="1.1" 
    baseProfile="full" 
    width="200" height="200" 
    xmlns="http://www.w3.org/2000/svg"> 

    <rect id="foo" height="100" width="100" /> 

</svg> 

CSS : 숨겨진 :

#foo { 
    fill: #f00; 
    transform: scaleX(0.5); 
} 

@media only screen and (min-width: 500px) { 
    #foo { 
     transform: scaleX(2); 
    } 
} 

http://jsfiddle.net/bangarang/tgcw1fop/