Nền tảng - Kiểu chữ cơ sở

Sự miêu tả

Typography trong Foundation xác định các tiêu đề, đoạn văn, danh sách và các phần tử nội dòng khác tạo ra các kiểu mặc định hấp dẫn và đơn giản cho các phần tử.

Bảng sau liệt kê các kiểu chữ khác nhau được sử dụng trong Foundation -

Sr.No.	Kiểu chữ & Mô tả
1	Đoạn văn Đoạn văn là một nhóm các câu được xác định với kích thước phông chữ khác nhau, các từ được đánh dấu, chiều cao dòng, v.v.
2	Tiêu đề Nó xác định các tiêu đề HTML từ h1 đến h6.
3	Liên kết Nó tạo ra một siêu liên kết mở ra một tài liệu khác khi bạn bấm vào văn bản hoặc hình ảnh.
4	Ngăn cách Nó được sử dụng để ngắt quãng giữa các phần bằng cách sử dụng thẻ <hr>.
5	Danh sách có thứ tự và không có thứ tự Foundation hỗ trợ danh sách có thứ tự, danh sách không có thứ tự để liệt kê những thứ.
6	Danh sách Định nghĩa Định nghĩa Danh sách được sử dụng để hiển thị các cặp giá trị tên.
7	Những câu chuyện cổ tích Nó đại diện cho khối văn bản, định nghĩa lớn hơn nhiều so với bình thường.
số 8	Viết tắt và mã Viết tắt xác định một thuật ngữ rút gọn của từ hoặc cụm từ và mã đại diện cho một đoạn mã.
9	Tổ hợp phím Nó được sử dụng để thực hiện một chức năng cụ thể.
10	Khả năng tiếp cận Foundation cung cấp một số hướng dẫn để truy cập nội dung của trang.

Tham khảo Sass

Bạn có thể thay đổi kiểu của các thành phần bằng cách sử dụng các biến SASS sau đây như được liệt kê trong bảng.

Dưới đây là kiểu của các thành phần bằng cách sử dụng các biến SASS sau.

Sr.No.	Tên & Mô tả	Kiểu	Giá trị mặc định
1	$header-font-family Chỉ định họ phông chữ cho các phần tử tiêu đề.	Chuỗi hoặc danh sách	$ body-font-family
2	$header-font-weight Chỉ định trọng lượng phông chữ của tiêu đề.	Chuỗi	$ global-weight-normal
3	$header-font-style Cung cấp kiểu phông chữ của tiêu đề.	Chuỗi	bình thường
4	$font-family-monospace Ngăn xếp phông chữ được sử dụng cho các phần tử sử dụng kiểu monospaced, chẳng hạn như mẫu mã.	Chuỗi hoặc danh sách	Consolas, 'Liberation Mono', Courier, monospace
5	$header-sizes Xác định kích thước màn hình của tiêu đề và mỗi khóa là một điểm ngắt và mỗi giá trị là một bản đồ của kích thước tiêu đề.	Bản đồ	`small: ( 'h1': 24 'h2': 20 'h3': 19 'h4': 18 'h5': 17 'h6': 16 ) medium: ( 'h1': 48 'h2': 40 'h3': 31 'h4': 25 'h5': 20 'h6': 16 )`
6	$header-color Cung cấp màu sắc của tiêu đề.	Màu sắc	thừa kế
7	$header-lineheight Xác định chiều cao dòng của tiêu đề.	Con số	1,4
số 8	$header-margin-bottom Cung cấp lề dưới của tiêu đề.	Con số	0,5rem
9	$header-text-rendering Xác định phương pháp kết xuất văn bản.	Chuỗi	tối ưu hóa
10	$small-font-size Chỉ định kích thước phông chữ cho các phần tử <small>.	Con số	80%
11	$paragraph-margin-bottom Chỉ định lề dưới của đoạn văn.	Con số	1rem
12	$paragraph-text-rendering Các phương pháp kết xuất đoạn văn bản.	Chuỗi	tối ưu hóa
13	$code-color Cung cấp màu văn bản cho các mẫu mã.	Màu sắc	$ đen
14	$code-font-family Cung cấp họ phông chữ cho các mẫu mã.	Chuỗi hoặc danh sách	$ font-family-monospace
15	$code-border Chỉ định đường viền xung quanh mã.	Danh sách	1px đặc $ vừa xám
16	$code-padding Chỉ định phần đệm xung quanh văn bản.	Số hoặc Danh sách	rem-calc (2 5 1)
17	$anchor-color Màu mặc định cho các liên kết.	Màu sắc	$ màu chính
18	$anchor-color-hover Chỉ định màu mặc định cho các liên kết khi di chuột.	Màu sắc	scale-color ($ anchor-color, $ light: -14%)
19	$anchor-text-decoration Trang trí văn bản mặc định cho các liên kết.	Chuỗi	không ai
20	$anchor-text-decoration-hover Trang trí văn bản mặc định cho các liên kết khi di chuột.	Chuỗi	không ai
21	$hr-width Xác định chiều rộng tối đa của một dải phân cách.	Con số	$ global-width
22	$hr-border Chỉ định đường viền mặc định cho một dải phân cách.	Danh sách	1px đặc $ vừa xám
23	$hr-margin Lề mặc định cho một dải phân cách.	Số hoặc Danh sách	rem-calc (20) tự động
24	$list-lineheight Nó xác định chiều cao dòng cho các mục trong danh sách.	Con số	$ paragraph-lineheight
25	$list-style-type Cung cấp loại dấu đầu dòng cho danh sách không có thứ tự.	Chuỗi	đĩa
26	$list-style-position Nó xác định vị trí cho các dấu đầu dòng trên danh sách không có thứ tự.	Chuỗi	ở ngoài
27	$list-side-margin Xác định lề bên trái (hoặc bên phải).	Con số	1,25rem
28	$defnlist-term-weight Cung cấp độ đậm phông chữ cho các phần tử <dt>.	Chuỗi	$ global-weight-bold
29	$defnlist-term-margin-bottom Cung cấp khoảng cách giữa các phần tử <dt> và <dd>.	Con số	0,3rem
30	$blockquote-color Nó áp dụng màu văn bản của các phần tử <blockquote>.	Màu sắc	$ xám đen
31	$blockquote-padding Cung cấp phần đệm bên trong các phần tử <blockquote>.	Số hoặc Danh sách	rem-calc (9 20 0 19)
32	$blockquote-border Nó cung cấp đường viền bên cho các phần tử <blockquote>.	Danh sách	1px đặc $ vừa xám
33	$cite-font-size Xác định kích thước phông chữ cho các phần tử <cite>.	Con số	rem-calc (13)
34	$cite-color Cung cấp màu văn bản cho `<cite>`các phần tử.	Màu sắc	$ xám đen
35	$keystroke-font Xác định họ phông chữ cho các phần tử <kbd>.	Chuỗi hoặc danh sách	$ font-family-monospace
36	$keystroke-color Xác định màu văn bản cho các phần tử <kbd>.	Màu sắc	$ đen
37	$keystroke-background Cung cấp màu nền cho các phần tử <kbd>.	Màu sắc	$ xám nhạt
38	$keystroke-padding Chỉ định đệm cho các phần tử <kbd>.	Số hoặc Danh sách	rem-calc (2 4 0)
39	$keystroke-radius Hiển thị bán kính đường viền cho các phần tử <kbd>.	Số hoặc Danh sách	$ global-radius
40	$abbr-underline Cung cấp kiểu đường viền dưới cùng cho các phần tử <abbr>.	Danh sách	1px chấm $ đen