2012-08-07 3 views
38

나는 사이트 Helvetica65에 상단 탐색 요소에 포함 된 글꼴을 사용하고 있습니다 및 16px에서 그것은 완벽한 WIDTH는하지만 난 그게 수에 대한 90% 그것의 현재 높이의 할 필요가있다.CSS를 사용하여 글꼴의 수직 배율을 조정할 수 있습니까?

Photoshop에서 솔루션은 간단합니다. 수직 배율을 조정하십시오.

CSS를 사용하여 본질적으로 동일한 작업을 수행 할 수있는 방법이 있습니까? 그렇다면 어떻게 잘 지원됩니까?

기본 nav 코딩의 jsFiddle입니다.

+0

우리가 코드를 볼 수, 또는 당신은 우리에게 jsfiddle을 설정할 수 있습니까? –

+0

그냥 내 원래 게시물에 편집에 게시했습니다. – Cynthia

답변

69

transform 속성은 텍스트의 크기를 조절하는 데 사용 할 수 있습니다

.menu li a { 
    color: #ffffff; 
    text-transform: uppercase; 
    text-decoration: none; 
    font-family: "HelveticaNeue-Medium", sans-serif; 
    font-size: 14px; 
    display: inline-block; 
    transform: scale(1, 1.5); 
    -webkit-transform: scale(1, 1.5); /* Safari and Chrome */ 
    -moz-transform: scale(1, 1.5); /* Firefox */ 
    -ms-transform: scale(1, 1.5); /* IE 9+ */ 
    -o-transform: scale(1, 1.5); /* Opera */ 
} 
+0

답변을 수락하는 것으로 선택해야합니다. –

+0

나는 크기를 키가 크지 않고 넓게 만드는 제목에 스케일 변환을 적용했습니다. 즉, 이제 텍스트가 페이지의 나머지 텍스트 왼쪽에서 시작됩니다. 왼쪽으로 여백을 추가하여 줄에 다시 넣습니다. 변환과의 차이를 계산하는 방법이 있습니까? – RouthMedia

+0

@RouthMedia 당신은'transform-origin'을 찾고 있습니다. 아마'transform-origin : 왼쪽 위 '; – honk31

관련 문제