Tạo các ký tự hẹp với CSS

Làm cách nào để giảm độ rộng ký tự của phông chữ giống như Arial bằng CSS?Tạo các ký tự hẹp với CSS

2009-07-21 Alex

Tôi nghĩ rằng có thể trong CSS 3 nhưng không phải CSS 2 –

Bạn không thể giảm độ rộng ký tự, nhưng bạn có thể giảm khoảng cách chữ cái.

span { 
letter-spacing: 0px; 
}

Nguồn

2009-07-21 19:31:43

cũng mất phân số thập phân (ví dụ: 0,2px) và âm bản (ví dụ: -1px, -0,2px), để bạn có thể kiểm soát tốt. – Val

oh và các đơn vị khác nhau, do đó, nó có thể độc lập với kích thước: -1%, -0.01em - tiện dụng nếu văn bản được đề cập thay đổi về kích thước. – Val

@Val, tôi không biết bạn đang sử dụng trình duyệt nào, nhưng phân số thập phân dường như không hoạt động trong Chrome 21 ba năm sau đó. – JohnK

Tạo phông chữ sẽ có thể với font-stretch property of CSS 3.

Nguồn

2009-07-21 19:34:48 Gumbo

nhưng không được hỗ trợ với trình duyệt Webkit (Google Chrome, Apple Safari, ...) –

+19

@ PrimozRome Đó là lý do tại sao tôi đã sử dụng thì trong tương lai. – Gumbo

Nó vẫn không được hỗ trợ, 6 năm trôi qua kể từ khi câu trả lời. Cảm ơn bạn cho câu trả lời anyway. :) –

Sử dụng phông chữ hẹp trong tuyên bố gia đình phông chữ của bạn. Đây là khá phổ biến.

font-family: "Helvetica Narrow","Arial Narrow",Tahoma,Arial,Helvetica,sans-serif;

Nguồn

2011-02-16 21:22:03

bạn có thể sử dụng font-weight: trong mã css của bạn cho việc này

Nguồn

2015-12-10 14:05:14 Zero

FYI - Điều này chỉ hoạt động với một số phông chữ –

Bạn chỉ có thể mở rộng văn bản của bạn. Ví dụ:

.my-text { 
    transform: scaleX(0.5); 
}

nhưng hãy cẩn thận với transform-origin có thể làm cho văn bản của bạn di chuyển ở nơi khác (ví dụ: nếu bạn mở rộng văn bản ở trung tâm của nó).

Nguồn

2016-10-19 07:01:03 Javarome

Tôi đã sử dụng 'transform' trong FireFox 54 cho văn bản trong phần tử' SELECT'. Nó chính xác thu nhỏ văn bản bên trong phần tử 'SELECT' của tôi và đã vẽ chính xác phần tử' SELECT', nhưng nó không thể điều chỉnh khoảng cách giữa các đối tượng. Phần tử 'SELECT' có cùng một không gian, mặc dù nó nhỏ hơn đáng kể theo chiều ngang. – JBH

Tạo các ký tự hẹp với CSS

Trả lời

Các vấn đề liên quan