Với font-style Thuộc tính CSS, chúng ta có thể tạo kiểu cho phông chữ của mình với một tập hợp các đặc điểm để tạo điểm nhấn cho văn bản của chúng ta.
Như mọi khi, hãy kiểm tra Codepen của tôi để bạn có thể viết mã cùng với tôi.
font-style Cú pháp và tùy chọn
Chúng tôi có các tùy chọn sau khi sử dụng font-style . Lưu ý, tất cả chúng đều được chỉ định dưới dạng từ khóa.
font-style: normal; font-style: italic; font-style: oblique 30deg; font-style: oblique;
Kiểu phông chữ cũng hỗ trợ một số từ khóa kiểu toàn cầu phổ biến.
/* inherit from parent element */ font-style: inherit; /* browser's default */ font-style: initial; /* inherit if parent value, else initial */ font-style: unset;
Thông thường liên quan đến phông chữ bình thường trong font-family được chỉ định của bạn .
Với xiên, chúng ta có thể tùy chọn chỉ định góc (-90 đến 90) và nếu không có góc nào được chỉ định, nó sẽ mặc định là 14.
Lưu ý rằng chữ xiên và chữ nghiêng có thể hoán đổi cho nhau . Điều này là do hỗ trợ trình duyệt và nếu bạn đang sử dụng một phông chữ đặc biệt và nếu trình duyệt không tìm thấy hoặc không hỗ trợ thì chữ xiên sẽ sử dụng chữ in nghiêng, v.v.
Trước khi sử dụng oblique , hãy kiểm tra xem từ khóa xiên có được hỗ trợ đầy đủ trên trình duyệt của bạn hay không.
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
Với ý nghĩ đó, hãy tiếp tục và nhấn mạnh vào tiêu đề h1 của chúng tôi:
h1.title {
font-family: 'Tangerine';
font-style: normal;
} Bạn sẽ nhận thấy cách chúng tôi nhập phông chữ Tangerine từ phông chữ của Google, kiểu thông thường của phông chữ này là chữ thảo nên nó được hiển thị như vậy.
Đối với phông chữ cụ thể này, việc đặt nó thành chữ thảo sẽ nghiêng hơn, vì vậy chúng tôi có thể sẽ không muốn áp dụng.
Công dụng chính của kiểu phông chữ
Trong hầu hết các trường hợp, việc sử dụng từ khóa bình thường là thừa. Vì vậy, việc sử dụng chính của font-style thuộc tính đặt phông chữ nghiêng để thêm phần nhấn mạnh.
Để thêm phần nhấn mạnh cho một đoạn văn, hãy đặt một trong số chúng thành chữ nghiêng.
p.par {
font-family: 'Indie Flower';
font-style: italic;
} Nếu bạn kiểm tra phông chữ Indie Flower, bạn sẽ nhận thấy nó chỉ có kiểu thông thường (bình thường). Trong trường hợp này, chính trình duyệt đang thực hiện hiệu ứng dốc!
Kết luận
Sử dụng font-style thuộc tính được liên kết sâu với font-family . Ngoài ra, cho đến khi có trình duyệt hỗ trợ tốt hơn cho oblique từ khóa, việc sử dụng chính của thuộc tính này sẽ là thêm sự nhấn mạnh vào các phông chữ bằng cách đặt chúng thành chữ nghiêng.