2015-10-04 29 views
6

Tôi có điều này tôi đang làm việc khi tôi muốn thay đổi không phải là font-size nhưng hai thuộc tính sẽ thay đổi độc lập chiều rộng và chiều cao của văn bản. Vì vậy, khi áp dụng font-width: 50% này:Thay đổi chiều cao và chiều rộng phông chữ

enter image description here

Văn bản sẽ được kéo dài đến nửa:

enter image description here

phải là có thể này để làm với CSS, cũng với thuộc tính chiều cao?

+1

"nếu lười biếng của bạn ở đây là một fiddle ". Không chắc nó sẽ giảm xuống như thế nào. Với jquery này có thể giúp đỡ. Nơi bạn tạo một số và thay đổi 2 thuộc tính css. Chỉ cần rõ ràng là bạn muốn kiểm soát chiều rộng và chiều cao của văn bản một cách độc lập. Làm thế nào để bạn kiểm soát chiều rộng tại thời điểm –

+0

http://stackoverflow.com/questions/15649244/responsive-font-size Điều này có thể giúp –

+0

Có một thuộc tính kéo dài phông chữ trong css nhưng hiện tại nó không được hỗ trợ bởi tất cả các trình duyệt chính –

Trả lời

19

CSS3 transformscale chức năng cho việc này:

p { 
 
    display: inline-block; 
 
    font-size: 32px; 
 
    transform: scale(.5, 1); 
 
}
<p>This is text.</p>

Sử dụng hai số trong hàm cho trục X và trục Y tương ứng.

4

Bạn có thể thử mở rộng phông chữ theo hướng x.

p{ 
    -webkit-transform: scaleX(0.5); 
    transform: scaleX(0.5); 
} 

--EDIT--

tôi thấy @Xufox alredy trả lời nó.

1

Điều gần nhất tôi có thể tìm thấy là trọng lượng phông chữ

Nó không chỉ chấp nhận các giá trị in đậm, bình thường mà còn là số. 100-900 trong 100 gia số.

. Paragraph {font-weight :700;} 

này kết hợp với thuộc tính chiều cao nên giúp đỡ, nhưng sẽ không cung cấp cho bạn giải pháp hoàn chỉnh

Ngoài ra nhìn vào tính khoảng cách như bạn có thể làm giảm độ rộng của những từ mà cách

letter-spacing: 2px; 
Các vấn đề liên quan