15/11/2024 12:40

Cách Sử Dụng Font Chữ Màu Sắc Trên Web

Mọi nhà thiết kế web đều biết cách thiết lập màu cho phông chữ, đúng không? Đó là một trong những điều đầu tiên mà chúng ta làm khi bắt đầu học về CSS. Chúng ta lựa chọn một màu, sau đó chúng ta...

Vietnamese (Tiếng Việt) translation by Dai Phong (you can also view the original English article)

Mọi nhà thiết kế web đều biết cách thiết lập màu cho phông chữ, đúng không? Đó là một trong những điều đầu tiên mà chúng ta làm khi bắt đầu học về CSS. Chúng ta lựa chọn một màu, sau đó chúng ta sử dụng style để thiết lập nó, chẳng hạn như color: blue; hoặc color: purple;, như vậy tất cả các glyph trong phông chữ đã chọn của chúng ta đều chuyển sang màu đó và chỉ màu đó.

Nhưng nếu bạn có thể định nghĩa nhiều hơn một màu cho mỗi glyph thì sao? Nếu bạn có thể làm cho các chữ cái có màu xanh và tím, hoặc chuyển màu giữa xanh và tím, hoặc thậm chí có nửa tá màu sắc hoặc nhiều hơn được áp dụng cho một họ phông chữ duy nhất thì sao?

Vâng, với sự xuất hiện của phông chữ Open Type Color hay còn gọi là phông chữ màu, bạn có thể làm điều đó.

Hãy xem qua hình ảnh của bốn phông chữ màu sắc khác nhau:

Điều này có thể giống như những hình ảnh cố định được gom lại với nhau trong Illustrator, nhưng bạn thật sự đang xem văn bản có thể đọc được trực tiếp, có thể chỉnh sửa, công cụ tìm kiếm có thể đọc trên trình duyệt.

Thay vì điều khiển màu sắc của chúng thông qua CSS, những phông chữ này có chứa thông tin nội tại cho phép chúng có nhiều màu sắc mỗi glyph, làm cho chúng hiển thị khá ấn tượng.

Sử Dụng Phông Chữ Màu Sắc

Phông chữ màu sắc vẫn còn khá mới nên vẫn chưa có nhiều phông được phát hành, và trong số những phông chữ có sẵn thì có sự kết hợp của các phông chữ miễn phí và có phí. Để đảm bảo bạn có thể tự mình tinh chỉnh các phông chữ màu sắc, tôi đã chọn bốn phông chữ miễn phí cho bản demo. Bạn có thể lấy về các phông chữ này tại các địa chỉ sau:

Gilbert trên typewithpride.com
Abalone trên colorfontweek.fontself.com
Playbox trên colorfontweek.fontself.com
Bixa trên bixacolor.com

Code dùng để thêm chúng vào trang web không có gì mới, nó chỉ là @font-face như cũ mà bạn biết và yêu thích:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Color Fonts</title>
	<style>
	@font-face {
		font-family: 'Gilbert';
		src: url('fonts/Gilbert-Color Bold-Preview_1004.otf');
	}
	@font-face {
		font-family: 'Abalone';
		src: url('fonts/Abelone-FREE.otf');
	}
	@font-face {
		font-family: 'Playbox';
		src: url('fonts/Playbox-FREE.otf');
	}
	@font-face {
		font-family: 'Bixa';
		src: url('fonts/NTBixa-Color.woff2');
	}
	body {
		font-size: 4.5rem;
		line-height: 1.618;
	}
	.gilbert {
		font-family: 'Gilbert';
	}
	.abalone {
		font-family: 'Abalone';
		font-size: 3.8rem;
	}
	.playbox {
		font-family: 'Playbox';
	}
	.bixa {
		font-family: 'Bixa';
	}
	</style>
</head>
<body>
		<a class="gilbert">Gilbert Color Font</a>
		<div class="abalone">Abalone Color Font</div>
		<div class="playbox">Playbox Color Font</div>
		<div class="bixa">Bixa Color Font</div>
</body>
</html>

Trình Duyệt Hỗ Trợ

Tại thời điểm này, nếu bạn muốn thử các phông chữ màu sắc trong trình duyệt, bạn sẽ cần phải sử dụng Firefox hoặc Edge, hai trình duyệt duy nhất hỗ trợ đầy đủ. Safari chỉ hỗ trợ định dạng SBIX. Chrome chỉ hỗ trợ trên Android và chỉ có định dạng CBDT. Opera không có hỗ trợ gì cả.

Hiệu Chỉnh CSS

Hiện tại, chúng ta không thể sử dụng CSS để thay đổi màu sắc được sử dụng trong phông chữ màu. Tuy nhiên, một nhà thiết kế phông chữ có thể gửi một phông chữ bao gồm một số biến thể. Sau đó, các biến thể đó có thể được sửa đổi bằng cách sử dụng thuộc tính font-feature-settings.

Chúng ta có thể thấy tính năng này hoạt động thông qua bản demo của Robin Rendle đối với phông chữ Trajan Color từ TypeKit.

Màu Sắc Cố Định, Ngay Cả Trên Liên Kết

Vì các màu sắc của một phông chữ màu được cố định bên trong bản thân phông chữ, thuộc tính color mà bạn thường áp dụng cho văn bản của bạn sẽ hoàn toàn không có tác dụng, kể cả các liên kết, bất kể trạng thái của chúng.

Cũng cần lưu ý rằng mặc dù không có sự thay đổi màu sắc nào xảy ra với liên kết, chúng vẫn có phần gạch dưới mặc định và phần gạch dưới sẽ nhận bất kỳ màu nào mà bạn chỉ định thông qua CSS. Nếu bạn quyết định kết hợp phông chữ màu và liên kết, có thể sử dụng gạch chân để giúp người dùng phân biệt các liên kết với phần còn lại của văn bản.

Dưới đây là một số code ví dụ:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Color Fonts</title>
	<style>
	@font-face {
		font-family: 'Gilbert';
		src: url('fonts/Gilbert-Color Bold-Preview_1004.otf');
	}
	body {
		font-size: 4.5rem;
		line-height: 1.618;
	}
	.gilbert {
		font-family: 'Gilbert';
	}
	a {
		color: red;
	}
</head>
<body>
		<div class="gilbert">Gilbert Color <a href="#">Link</a></div>
</body>
</html>

Code này sẽ cho chúng ta gạch chân màu đỏ như đã thấy ở trên từ cuối:

Tóm Tắt

Giữa phông chữ màu và phông chữ biến, những phát triển mới nhất cho Open Type có vẻ là làm cho các phông chữ trên trình duyệt trở nên vui vẻ và thú vị hơn nhiều. Tương lai của kiểu thiết kế web typography trông có vẻ tươi sáng!

Các Liên Kết Liên Quan

Xây dựng Bixa Color
colorfonts.wtf
@colorfontswtf trênTwitter

Admin

Link nội dung: https://ngayqua.com/index.php/cach-su-dung-font-chu-mau-sac-tren-web-1731649204-a11791.html

1	<!DOCTYPE html>
2	<html lang="en">
3	<head>
4	<meta charset="UTF-8">
5	<meta name="viewport" content="width=device-width, initial-scale=1.0">
6	<meta http-equiv="X-UA-Compatible" content="ie=edge">
7	<title>Color Fonts</title>
8	<style>
9	@font-face {
10	font-family: 'Gilbert';
11	src: url('fonts/Gilbert-Color Bold-Preview_1004.otf');
12	}
13	@font-face {
14	font-family: 'Abalone';
15	src: url('fonts/Abelone-FREE.otf');
16	}
17	@font-face {
18	font-family: 'Playbox';
19	src: url('fonts/Playbox-FREE.otf');
20	}
21	@font-face {
22	font-family: 'Bixa';
23	src: url('fonts/NTBixa-Color.woff2');
24	}
25	body {
26	font-size: 4.5rem;
27	line-height: 1.618;
28	}
29	.gilbert {
30	font-family: 'Gilbert';
31	}
32	.abalone {
33	font-family: 'Abalone';
34	font-size: 3.8rem;
35	}
36	.playbox {
37	font-family: 'Playbox';
38	}
39	.bixa {
40	font-family: 'Bixa';
41	}
42	</style>
43	</head>
44	<body>
45	<a class="gilbert">Gilbert Color Font</a>
46	<div class="abalone">Abalone Color Font</div>
47	<div class="playbox">Playbox Color Font</div>
48	<div class="bixa">Bixa Color Font</div>
49	</body>
50	</html>