1. Giới thiệu
Lần cập nhật gần đây nhất: 11/5/2022
Hãy khai thác tính linh động thay đổi trong giao diện người dùng bằng các phông chữ đa dạng, giúp tăng khả năng thích ứng trong bố cục, giao diện và khả năng hỗ trợ tiếp cận, đồng thời giúp ứng dụng chạy nhanh hơn!
Kiến thức bạn sẽ học được
- Phông chữ có thể thay đổi là gì.
- Cách bạn có thể tuỳ chỉnh loại bằng chúng.
- Cách áp dụng phông chữ thay đổi cho thiết kế của bạn.
- Cách triển khai phông chữ biến đổi với Google Fonts API và trong CSS.
Điều kiện tiên quyết
Đối với phòng thí nghiệm này, chúng ta sẽ xây dựng dựa trên một số khái niệm thiết kế cơ bản.
- Có kiến thức về kiểu chữ.
- Kiến thức về Figma.
- Kiến thức cơ bản về HTML và CSS.
Bạn cần có
- Tài khoản Figma
- Tệp thiết kế của Figma
- Trình soạn thảo mã được lựa chọn cho web
2. Bắt đầu
Thiết lập
Để bắt đầu, bạn cần truy cập vào tệp Figma Designlab. Mọi thứ bạn cần cho lớp học này đều có trong tệp Figma đó. Bạn có thể tải tệp này xuống và nhập tệp hoặc sao chép qua cộng đồng Figma.
Trước tiên, hãy đăng nhập vào Figma hoặc tạo một tài khoản.
Sao chép qua trang Cộng đồng Figma
Chuyển đến tệp Di chuyển sang phông chữ thay đổi hoặc tìm mục Di chuyển sang phông chữ khác trong Cộng đồng Figma. Nhấp vào Sao chép ở góc trên cùng bên phải để sao chép tệp đó vào các tệp.
Bố cục tệp
Khi bạn xem qua tệp, hãy chú ý rằng tệp nằm độc lập, bắt đầu với phần giới thiệu. Mỗi phần sẽ được chia thành một hàng gồm các bản vẽ được liên kết với nhau, với một số khái niệm cốt lõi cho phần đó, sau đó là các bài tập. Các phần và bài tập xây dựng lẫn nhau và phải được hoàn thành tuần tự.
Lớp học lập trình này sẽ hướng dẫn bạn về các khái niệm và bài tập đó một cách chi tiết hơn. Hãy tham gia lớp học lập trình này để tìm hiểu thêm về các tính năng mới của Material You.
Bắt đầu từ bảng minh hoạ Giới thiệu, có các nút liên kết các bảng vẽ với nhau theo thứ tự. Để truy cập vào đường liên kết, hãy nhấp vào nút đó.
Kiểm tra phông chữ có thể thay đổi
Trước khi bắt đầu, chúng ta cần đảm bảo có một phông chữ dễ thay đổi! Tệp này sử dụng Roboto Flex, đã có trong Figma hoặc bạn có thể tải xuống từ fonts.google.com
3. Phông chữ thay đổi là gì?
Phông chữ biến đổi là định dạng phông chữ sáng tạo mới cho phép người dùng kiểm soát loại và biểu tượng của mình. Roboto Serif và Roboto Flex là các kiểu chữ mới được làm mới cho công nghệ phông chữ đa dạng, mỗi kiểu chữ đều có một loạt các trục. 
Trục và cách thể hiện thẩm mỹ
Nhà thiết kế không còn bị giới hạn ở các kiểu phông chữ cố định cũ, chẳng hạn như thông thường, đậm, nghiêng, v.v. Các biến trong phông chữ thay đổi được kiểm soát bằng các trục hoặc bản sao. Nếu nhà thiết kế kiểu chọn, thì bất kỳ biến nào trong thiết kế kiểu đều có thể được gán cho một trục mà người dùng kiểm soát. Các trục thông thường bao gồm kiểu in nghiêng, kích thước quang học, độ xiên, độ đậm, chiều rộng. 5 trục này là những trục đã đăng ký trong CSS.
Lợi ích
Phông chữ biến đổi cho phép bạn phân phối nhiều kiểu trong một tệp phông chữ duy nhất, giúp trang web bền vững hơn, nhỏ hơn và nhanh hơn, đồng thời mang lại cho nhà thiết kế quyền kiểm soát biểu đạt rõ ràng hơn.
4. Sử dụng phông chữ thay đổi trong thiết kế
Thay đổi trục
Hãy xem qua tất cả các tham số (hoặc các trục) có sẵn và tác dụng của chúng. Chọn loại ở bên phải và mở cửa sổ Chi tiết loại (biểu tượng khác) để mở thanh trượt trục và xem qua từng thông số.
- Cân nặng xác định độ dày của chữ. Cung cấp phạm vi độ dày nét vẽ đầy đủ, liên tục.
- Chiều rộng là kết quả của việc các ký tự kiểu chữ chiếm bao nhiêu không gian ngang.
- Điều chỉnh kiểu chữ từ thẳng đứng thành nghiêng, còn được người viết chữ gọi là "góc nghiêng" phong cách. Mặc dù hiếm, nhưng nghiêng có thể hoạt động theo hướng khác, được gọi là "ngược" hoặc "góc nghiêng" phong cách.
- Lớp là hệ số sửa đổi phụ của trọng số quang học của một kiểu chữ và độc lập với trục Trọng số. Cả Trọng số và Điểm đều ảnh hưởng đến độ dày của chữ cái, nhưng việc điều chỉnh với Điểm sẽ chi tiết hơn nhiều.
- Kích thước quang học. Điều chỉnh kiểu cho phù hợp với kích thước văn bản cụ thể, được chỉ định bằng điểm. Ở kích thước nhỏ hơn, các chữ cái thường được tối ưu hoá để dễ đọc hơn, với khoảng cách/góc nét rộng và nét chữ dày hơn nhưng ít chi tiết hơn. Ở kích thước lớn hơn, chữ cái thường được tối ưu hoá cho dòng tiêu đề có nét mỏng hơn và dạng chi tiết hơn cũng như trọng số và chiều rộng cực lớn.
Xem Bản minh hoạ về phông chữ biến để xem các trục phông chữ biến đổi bên ngoài Figma.
5. Vươn lên theo phong cách
Nếu làm việc với tài liệu hướng dẫn về văn phong thương hiệu, bạn có thể có sẵn kiểu chữ để cho biết các quy tắc ràng buộc về kiểu chữ. Việc sử dụng phông chữ thay đổi không có nghĩa là bỏ qua tính nhất quán này. Tính năng này giúp tinh chỉnh thêm tính linh hoạt của thang kiểu (cho các trường hợp sử dụng như tăng độ đậm trên nền tối) trong một tệp duy nhất.
Mặc dù kiểu chữ có thể bao gồm nhiều bộ phông chữ, nhưng ở đây chúng ta chỉ sử dụng một bộ phông chữ để tuỳ chỉnh phiên bản rút gọn của kiểu chữ mặc định trong Material.
- Hãy bắt đầu tuỳ chỉnh kiểu chữ bằng phần nội dung. Điều này cho phép chúng tôi đặt kích thước loại cơ sở của trang web trước rồi điều chỉnh về mặt quang học từ đó. Giá trị mặc định cho Body Large là 18pt, được chọn và đặt thành Roboto Flex. Việc điều chỉnh cho dễ đọc hơn trước đây có nghĩa là cập nhật cỡ chữ và độ đậm, tức là một tệp phông chữ khác, nhưng giờ đây, chúng ta có thể tinh chỉnh một số trục. Điều chỉnh kích thước, điểm và trọng lượng về mặt quang học.
- Tiếp tục với Nhãn. Nhãn sẽ thiết thực hơn và được sử dụng trong những ngữ cảnh nhỏ hơn, chẳng hạn như các nút. Điều chỉnh điểm theo mặt quang học để nhãn xuất hiện chính xác trên hộp chứa nút và khối.
- Hãy tiếp tục tinh chỉnh bằng Tiêu đề, Dòng tiêu đề và Hiển thị. Cả ba định dạng này đều dùng cho các văn bản ngắn hơn từ trung bình đến nhấn mạnh, chẳng hạn như tiêu đề trang và các mục. Dòng tiêu đề và Hiển thị có thể có kích thước và mức độ nhấn mạnh cao. Thoải mái chơi các rìu ở đây!
- Khi chọn kiểu, hãy nhấp vào 4 dấu chấm rồi thêm dấu (+) để đặt kiểu văn bản, đảm bảo các chế độ cài đặt kiểu có thể sử dụng lại nhất quán.
Bạn có thể tạo tỷ lệ kiểu chữ mặc định trong Material dưới dạng kiểu Figma bằng Material Theme Builder (Trình tạo giao diện Material) hoặc bằng cách sao chép bộ thiết kế M3.
6. Đã áp dụng cho giao diện người dùng
Sau khi thiết lập kiểu chữ, hãy áp dụng kiểu chữ cho các thành phần trên giao diện người dùng để triển khai trong mã! Hãy cân nhắc cách sử dụng phông chữ đa dạng để tăng tính biểu đạt và mức độ dễ đọc. Nếu đã thiết lập kiểu Figma trong bài tập trước, bạn có thể áp dụng các kiểu đó, sau đó cập nhật các trục của kiểu.
- Hãy xem các thành phần trên giao diện người dùng ở bên trái. Thẻ đầu tiên chứa loại cây, nội dung mô tả và một số thẻ danh mục, trong khi các thẻ còn lại mô tả hướng dẫn chăm sóc cây. Loại cây phù hợp với vai trò có mức độ nhấn mạnh cao, vì vậy, hãy sử dụng "dòng tiêu đề" phong cách. Đặt dòng tiêu đề thành dòng tiêu đề mà chúng ta đã thiết lập trước đó. Thẻ chăm sóc cũng có tiêu đề nhưng không có cùng mức độ nhấn mạnh, vì vậy hãy đặt tiêu đề là "tiêu đề".
- Bạn có thể gán thông tin chi tiết về cây và bản sao hướng dẫn cho "cơ thể lớn", trong khi nhãn danh mục là "gắn nhãn lớn".
- Hãy thử nghiệm nhiều vai trò và điều chỉnh các thành phần trên giao diện người dùng cũng như kiểu chữ để tìm ra sự cân bằng phù hợp.
7. Triển khai trong mã
Việc triển khai phông chữ biến đổi trong mã bằng CSS là phương pháp tương tự như mọi phông chữ trên web sử dụng dịch vụ phân phối phông chữ để tải phông chữ và tuỳ chỉnh với các thuộc tính CSS.
Chúng tôi sẽ sử dụng HTML và CSS cơ bản để triển khai, chứ không phải MWC hay bất kỳ khung nào.
Phông chữ biến thể trên Google Fonts
Bạn có thể sử dụng Google Fonts làm dịch vụ phân phối phông chữ để dễ dàng triển khai vô số phông chữ, bao gồm cả phông chữ có thể thay đổi, trên trang web của mình!
Khám phá những phông chữ có thể thay đổi bằng cách truy cập vào fonts.google.com. Trong phần tìm kiếm, hãy đánh dấu vào các phông chữ Chỉ hiển thị biến để lọc. Phông chữ thay đổi bao gồm một phần mở rộng ở gần cuối trang, nơi bạn có thể đặt thanh trượt cho mỗi trục có sẵn trong nhóm.
Tạo kiểu bằng CSS
Không phải phông chữ nào cũng có cùng số lượng trục để tuỳ chỉnh. Hiện tại, các chỉ số Trọng lượng, Chiều rộng, Nghiêng, Nghiêng và Kích thước quang học là phổ biến nhất.
Bạn có thể đặt các phông chữ này bằng các thuộc tính phông chữ CSS cơ bản đã tồn tại trước phông chữ biến đổi. Mặc dù mọi tính năng chưa được hỗ trợ rộng rãi (kể từ tháng 5 năm 2022), nhưng bạn có thể đặt tất cả các trục một cách đáng tin cậy bằng cách sử dụng thuộc tính mới font-variation-settings.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
*Kiểu phông chữ nghiêng (xếch) và In nghiêng (ý) không đáng tin cậy.
8. Nhập bằng Google Fonts API
Chúng tôi hiện chỉ sử dụng Roboto, nhưng hãy xem xét tất cả các phông chữ có sẵn trên font.google.com.
Chúng ta sẽ chọn phông chữ Roboto trong phần còn lại của lớp học lập trình này và tuỳ chỉnh loại phông chữ trong các thẻ sau dựa trên bài tập trước.
- Sao chép đoạn mã có chứa giao diện người dùng mẫu thẻ vào môi trường phát triển tích hợp (IDE) trên web mà bạn chọn.
<html>
<title>Migrating to Variable fonts</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/* imports __________________ */
/* body __________________________ */
body {
font-size: 18px;
color: #21005D;
background: #E8DEF8;
}
/* typography __________________________ */
h1 {
line-height: 0;
/* add font styles for headline */
}
h2 {
line-height: 0;
/* add font styles for care titles */
}
p {
margin: 0;
line-height: 150%;
/* add font styles for body copy */
}
.label {
/* add font styles for labels */
}
/* layout __________________________ */
article {
margin: 16px auto;
padding: 16px 24px;
width: 30%;
background: #FFFFFF;
border: 1px solid #4F8438;
border-radius: 24px;
}
div.labels {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
}
span.label {
margin: 8px 0;
padding: 4px 8px;
background: #C4EED0;
border-radius: 8px;
}
article.care {
padding: 8px 24px;
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
</style>
<body>
<article>
<h1>philodendron</h1>
<p>The philodendron is part of a large family of plants comprising 489 spcies. Known for their large interesting leaves, growing mainly in tropical climates. Most philodendron make for ideal houseplants, with some more rare exceptions are easy to propogate and require less attention as some fussier plant families</p>
<div class="labels">
<span class="label">easy care</span>
<span class="label">tropical</span>
</div>
</article>
<article class="care">
<span class="material-icons">water</span>
<h2>water</h2>
<p>Water when dry</p>
</article>
<article class="care">
<span class="material-icons">light</span>
<h2>light</h2>
<p>Bright indirect light</p>
</article>
</body>
</html>
- Hãy lưu ý đến thông số về kiểu mà chúng ta đã đặt trong bài tập cuối cho dòng tiêu đề, tiêu đề, nội dung và nhãn. Với những lưu ý đó, hãy chuyển đến trang về Roboto Flex. Đặt thanh trượt cho phù hợp với thông số kỹ thuật bạn đặt trong Figma, sau đó Select this style (Chọn kiểu này) cho mỗi thanh trượt để thêm vào ngăn bên.
- Trong ngăn, ở các kiểu đã chọn, hãy tìm mục Sử dụng trên web. Có hai cách để thêm phông chữ vào mã của bạn: bằng cách <link> hoặc @nhập. Bạn chỉ cần một tệp, hãy chọn @nhập.
- Sao chép từ @nhập vào dấu chấm phẩy và dán vào trong các thẻ kiểu sau nhận xét nhập.
- Vì Roboto Flex là phông chữ duy nhất được sử dụng, hãy thiết lập phần nội dung để gọi bộ phông chữ bằng cách thêm "Quy tắc CSS để chỉ định bộ phông chữ" có trong mã nhập.
body {
font-family: 'Roboto Serif', sans-serif;
font-size: 18px;
color: #0C332A;
background: rgb(247, 245, 245);
}
Thao tác này sẽ nhập tập hợp kiểu và phông chữ đã chọn, nhưng khi sử dụng phạm vi Trục, bạn có thể sử dụng loạt kiểu liên tục thay vì từng kiểu riêng lẻ. Để tạo dải ô, hãy kết hợp hai giá trị bằng .. (ví dụ: 100..900). Hãy đảm bảo rằng bạn chỉ thêm dải ô tồn tại trong thanh trượt của phông chữ, nếu không phông chữ sẽ không tải đúng cách.
Tính năng này được sử dụng tốt nhất để chuyển đổi hiệu ứng động mượt mà và thử nghiệm trong trình duyệt, vì tính năng này sẽ tải trong toàn bộ phạm vi và làm cho yêu cầu tải xuống lớn hơn.
9. Thuộc tính phông chữ của biến CSS
Sau khi bạn nhập phông chữ, hãy quay lại Figma để kéo một số thuộc tính CSS để tạo kiểu và xem thuộc tính CSS font-variation-settings.
- Bắt đầu với tiêu đề Đã chọn
h1ở bảng điều khiển bên phải, chọn thẻ Kiểm tra ở trên cùng. Thao tác này sẽ chuyển bảng điều khiển sang chế độ kiểm tra mã để chuyển giao cho nhà phát triển. Mã là phần cuối cùng. - Nếu bạn chưa làm như vậy, hãy thay đổi định dạng trình đơn thả xuống sang CSS. Các thuộc tính tiêu chuẩn, nếu đã sử dụng, sẽ được liệt kê (
font-weight, font-stretch, font-style, font-optical-sizing), theo sau làfont-variation-settingscấp thấp chứa các trục tuỳ chỉnh chưa được đăng ký. Trước tiên, hãy sử dụng các thuộc tính tiêu chuẩn trước khi chuyển sangfont-variation-settings.
Figma sử dụng chế độ cài đặt biến thể phông chữ cho chiều rộng (wdth) thay vì phông chữ kéo dài.
- Sao chép mã CSS này liên quan đến loại để tạo kiểu cho bộ chọn h1 của chúng tôi.
h1 {
line-height: 0;
font-size: 36px;
font-weight: 125;
font-stretch: 167%;
}
- Bạn có thể sao chép kiểu của tiêu đề thẻ chăm sóc vào
h2. Làm tương tự với phần sao chép nội dung, sao chép vàop. Có thể sao chép kiểu nhãn vào.label
10. Xin chúc mừng
Thật tuyệt khi bạn đã biết cách áp dụng các phông chữ đa dạng, tìm hiểu cách sử dụng chúng trong các thiết kế của mình cũng như cách triển khai chúng cho web.
Nếu bạn có thắc mắc, cứ thoải mái hỏi chúng tôi bất cứ lúc nào qua @MaterialDesign trên X.
Hãy theo dõi để biết xem nội dung và hướng dẫn về thiết kế trên youtube.com/MaterialDesign