Kích thước phông chữ lớn, chữ cái mỏng

Question

Giả sử tôi sử dụng font-size:30px; và font-family:Verdana;.

tôi cần những chữ cái được lớn, nhưng chưa mỏng, vì vậy tôi cố gắng font-weight:lighter;.

Tuy nhiên, không có gì thay đổi, một số phông chữ sẽ trở nên nhỏ hơn, một số sẽ không bị ảnh hưởng.

Làm cách nào để tạo các chữ cái to nhưng mỏng? Có cách nào trong CSS, hoặc đây là những phông chữ cụ thể?

Answer 1

Để đạt được một phiên bản gầy của Verdana, do font không hỗ trợ trọng lượng nhất định, bạn sẽ phải đăng cai phiên bản của riêng bạn của phông chữ, hoặc sử dụng một phông chữ đã được tổ chức để đạt được cái nhìn của bạn.

Một số phông chữ không hỗ trợ các phiên bản nhẹ hơn/nặng hơn của bản thân - nếu có, chúng có thể không phù hợp với quy mô số CSS (như bạn đã chỉ ra).

Từ here.

Bởi vì quá nhiều phông chữ web chất lượng chuyên môn đến trong một loạt các trọng, bây giờ nó có ý nghĩa nhiều hơn để sử dụng quy mô số hơn nó đã làm khi chúng ta chỉ phải đối phó với 'bình thường' (400) và 'đậm' (600). Thông thường, trọng lượng của một gia đình có thể được ánh xạ tới các giá trị:

100: Ultra Light

200: Thin

300: Ánh sáng

400: Regular

500: Bán Bold

600: Bold

700: tắm Bold

800: Nặng

900: siêu nặng

Lưu ý các từ khóa, không: thường. Thực tế, đáng buồn thay, nhiều phông chữ không phù hợp với mẫu này, như khi một gia đình có số lượng trọng số là hoặc các định nghĩa của riêng chúng không nhất thiết phải là phù hợp với thang đo chuẩn.

Vì vậy, câu chuyện dài ngắn, bạn sẽ phải lưu trữ phiên bản "mỏng hơn" của phông chữ (bạn đã tạo/tải xuống) hoặc sử dụng phông chữ khác.

IMO Tahoma, Hedley hoặc Geneva là các phông chữ trông giống nhau, tuy nhiên chúng không có sẵn miễn phí - bạn có thể xem Google fonts đối với một số, cả bạn và @minitech đều chỉ ra.

Answer 2

Đây là điều gần nhất tôi nảy ra.

div{ 
    font-family:Verdana; 
    font-size:30px; 
    font-weight:100; 
    -webkit-text-stroke-color: rgb(255,255,255); 
    -webkit-text-stroke-width: 1px; 
    -webkit-font-smoothing: antialiased; 
} 

vấn đề:
1. Chỉ làm việc với các trình duyệt webkit (Safari, Chrome)
2. Nếu nền phía sau văn bản không phải là một màu sau đó nó sẽ hiển thị rằng nó là một cơn đột quỵ văn bản .
http://jsfiddle.net/dru87/

Answer 3

Việc sử dụng font-weight có nghĩa là yêu cầu các kiểu phông chữ khác nhau (phông chữ cụ thể) từ họ phông chữ. Họ phông chữ Verdana không có kiểu chữ nào nhẹ hơn bình thường, vì vậy bạn chỉ cần bình thường. Điều này áp dụng cho hầu hết các phông chữ mà bạn thường có thể sử dụng trên các trang web. Ví dụ:

Ví dụ: Google Web Fonts, bạn có thể tìm thấy nhiều họ phông chữ có kiểu chữ nhẹ hơn bình thường, ví dụ: Nguồn Sans Pro có trọng số 200 và 300.

Lưu ý: Độ sáng của kiểu chữ có liên quan đến phông chữ. Ánh sáng (200) trong họ phông chữ có thể tương ứng với những gì là bình thường (400) trong một họ phông chữ khác.

Answer 4

Chọn một phông chữ mỏng và áp dụng bigtext.js/fittext.js hoặc slabtext.js

Answer 5

Không phải tất cả các phông chữ hỗ trợ tất cả độ rộng. Nếu bạn đang tìm kiếm một số phông chữ mỏng tốt. Bạn có thể xem danh sách thin google fonts này. Chúng miễn phí và dễ thực hiện.

Answer 6

Bước 1: Đưa vào để tải phông chữ từ Google

https://fonts.googleapis.com/css?family=Lato:100italic' rel = 'stylesheet' type = 'text/css'> https : //fonts.googleapis.com/css? family = Lato: 100 'rel =' stylesheet 'type =' text/css '>

Bước 2: Thêm thuộc tính css sau .text { font-family: Lato , sans serif;

phông chữ: 100;

cỡ phông chữ: 7em; }

Xong!

sẽ làm việc chắc chắn

Để biết thêm thông tin chuyến thăm http://tobiasahlin.com/typesource/01-elements-of-html-and-css/