Kiến thức cơ bản về tạo kiểu văn bản và phông chữ

Tạo kiểu văn bản trong CSS liên quan đến những gì?

Văn bản bên trong một phần tử được bố trí bên trong hộp nội dung của phần tử đó. Nó bắt đầu từ góc trên bên trái của vùng nội dung (hoặc góc trên bên phải, trong trường hợp nội dung ngôn ngữ RTL), và chảy về phía cuối dòng. Khi đến cuối, nó xuống dòng tiếp theo và tiếp tục chảy đến cuối. Mô hình này lặp lại cho đến khi tất cả nội dung được đặt vào hộp. Nội dung văn bản hoạt động hiệu quả như một chuỗi các phần tử inline, được bố trí trên các dòng liền kề nhau, và không tạo ra xuống dòng cho đến khi đến cuối dòng, trừ khi bạn buộc xuống dòng thủ công bằng phần tử <br>.

Các thuộc tính CSS dùng để tạo kiểu văn bản thường thuộc hai loại, chúng ta sẽ xem xét riêng trong bài viết này:

• Kiểu phông chữ: Các thuộc tính ảnh hưởng đến phông chữ của văn bản, ví dụ: phông chữ nào được áp dụng, kích thước của nó, và liệu nó có đậm, nghiêng, v.v. không.
• Kiểu bố cục văn bản: Các thuộc tính ảnh hưởng đến khoảng cách và các tính năng bố cục khác của văn bản, cho phép thao tác, ví dụ: khoảng cách giữa các dòng và chữ, và cách văn bản được căn chỉnh trong hộp nội dung.

Phông chữ

Hãy đi thẳng vào xem xét các thuộc tính để tạo kiểu phông chữ. Trong ví dụ này, chúng ta sẽ áp dụng một số thuộc tính CSS cho đoạn HTML mẫu sau:

<h1>Tommy the cat</h1>

<p>Well I remember it as though it were a meal ago…</p>

<p>
  Said Tommy the Cat as he reeled back to clear whatever foreign matter may have
  nestled its way into his mighty throat. Many a fat alley rat had met its
  demise while staring point blank down the cavernous barrel of this awesome
  prowling machine. Truly a wonder of nature this urban predator — Tommy the cat
  had many a story to tell. But it was a rare occasion such as this that he did.
</p>

Màu sắc

Thuộc tính color thiết lập màu sắc của nội dung phía trước của các phần tử được chọn, thường là văn bản, nhưng cũng có thể bao gồm một vài thứ khác, chẳng hạn như đường gạch chân hoặc đường gạch trên văn bản được đặt bằng thuộc tính text-decoration.

color có thể nhận bất kỳ đơn vị màu CSS nào, ví dụ:

p {
  color: red;
}

Điều này sẽ làm cho các đoạn văn trở thành màu đỏ, thay vì màu đen mặc định của trình duyệt, như sau:

Họ phông chữ

Để thiết lập phông chữ khác cho văn bản của bạn, bạn sử dụng thuộc tính font-family — điều này cho phép bạn chỉ định một phông chữ (hoặc danh sách phông chữ) để trình duyệt áp dụng cho các phần tử được chọn. Trình duyệt chỉ áp dụng phông chữ nếu nó có sẵn trên máy đang truy cập trang web; nếu không, nó sẽ chỉ sử dụng phông chữ mặc định của trình duyệt. Một ví dụ đơn giản trông như sau:

p {
  font-family: "Arial";
}

Điều này sẽ làm cho tất cả các đoạn văn trên trang sử dụng phông chữ Arial, vốn có sẵn trên bất kỳ máy tính nào.

Phông chữ an toàn cho web

Nói về tính khả dụng của phông chữ, chỉ có một số lượng nhất định các phông chữ thường có sẵn trên tất cả các hệ thống và do đó có thể được sử dụng mà không cần lo lắng nhiều. Đây là những phông chữ được gọi là phông chữ an toàn cho web.

Hầu hết thời gian, với tư cách là các nhà phát triển web, chúng ta muốn có quyền kiểm soát cụ thể hơn về các phông chữ được sử dụng để hiển thị nội dung văn bản của chúng ta. Vấn đề là tìm cách biết phông chữ nào có sẵn trên máy tính được dùng để xem các trang web của chúng ta. Không có cách nào để biết điều này trong mọi trường hợp, nhưng các phông chữ an toàn cho web được biết là có sẵn trên hầu hết các phiên bản của các hệ điều hành phổ biến nhất (Windows, macOS, các bản phân phối Linux phổ biến nhất, Android và iOS).

Danh sách các phông chữ an toàn cho web thực tế sẽ thay đổi khi các hệ điều hành phát triển, nhưng có thể coi các phông chữ sau là an toàn cho web, ít nhất là hiện tại (nhiều phông chữ trong số chúng đã được phổ biến nhờ sáng kiến Core fonts for the Web của Microsoft vào cuối những năm 90 và đầu những năm 2000):

Phông chữ mặc định

CSS định nghĩa năm tên chung cho phông chữ: serif, sans-serif, monospace, cursive, và fantasy. Đây là những tên rất chung chung và mặt phông thực sự được sử dụng từ những tên chung này có thể khác nhau giữa mỗi trình duyệt và mỗi hệ điều hành mà chúng được hiển thị. Nó đại diện cho tình huống xấu nhất khi trình duyệt sẽ cố gắng hết sức để cung cấp một phông chữ trông phù hợp. serif, sans-serif, và monospace khá dự đoán được và nên cung cấp một kết quả hợp lý. Mặt khác, cursive và fantasy ít dự đoán hơn và chúng tôi khuyến nghị sử dụng chúng rất cẩn thận, kiểm tra khi bạn sử dụng.

Năm tên được định nghĩa như sau:

My big red elephant

body {
  font-family: serif;
}

My big red elephant

body {
  font-family: sans-serif;
}

My big red elephant

body {
  font-family: monospace;
}

My big red elephant

body {
  font-family: cursive;
}

My big red elephant

body {
  font-family: fantasy;
}

Font stack

Vì bạn không thể đảm bảo tính khả dụng của các phông chữ bạn muốn sử dụng trên các trang web của mình (ngay cả phông chữ web có thể thất bại vì một lý do nào đó), bạn có thể cung cấp một font stack để trình duyệt có nhiều phông chữ để lựa chọn. Điều này bao gồm một giá trị font-family gồm nhiều tên phông chữ được phân cách bằng dấu phẩy, ví dụ:

p {
  font-family: "Trebuchet MS", "Verdana", sans-serif;
}

Trong trường hợp như vậy, trình duyệt bắt đầu từ đầu danh sách và kiểm tra xem phông chữ đó có sẵn trên máy không. Nếu có, nó áp dụng phông chữ đó cho các phần tử được chọn. Nếu không, nó chuyển sang phông chữ tiếp theo, và cứ tiếp tục như vậy.

Đây là ý tưởng hay khi cung cấp một tên phông chữ chung phù hợp ở cuối stack để nếu không có phông chữ nào trong danh sách khả dụng, trình duyệt ít nhất có thể cung cấp thứ gì đó tương đương. Để nhấn mạnh điều này, các đoạn văn sẽ được cung cấp phông chữ serif mặc định của trình duyệt nếu không có tùy chọn nào khác — thường là Times New Roman — điều này không phù hợp với phông chữ sans-serif!

Ví dụ về font-family

Hãy bổ sung vào ví dụ trước của chúng ta, cho các đoạn văn một phông chữ sans-serif:

p {
  color: red;
  font-family: "Helvetica", "Arial", sans-serif;
}

Điều này cho chúng ta kết quả sau:

Kích thước phông chữ

Trong bài viết Giá trị và đơn vị CSS của mô-đun trước, chúng ta đã xem xét các đơn vị độ dài và kích thước. Kích thước phông chữ (được thiết lập bằng thuộc tính font-size) có thể nhận các giá trị được đo bằng hầu hết các đơn vị này (và các đơn vị khác, chẳng hạn như tỷ lệ phần trăm); tuy nhiên, các đơn vị phổ biến nhất bạn sẽ sử dụng để định cỡ văn bản là:

• px (pixel): Số lượng pixel chiều cao bạn muốn văn bản cao. Đây là đơn vị tuyệt đối — nó cho ra cùng giá trị cuối cùng đã tính toán cho phông chữ trên trang trong hầu hết mọi tình huống.
• em: 1 em bằng kích thước phông chữ được thiết lập trên phần tử cha của phần tử hiện tại chúng ta đang tạo kiểu (cụ thể hơn, chiều rộng của chữ hoa M chứa trong phần tử cha). Điều này có thể trở nên khó tính toán nếu bạn có nhiều phần tử lồng nhau với kích thước phông chữ khác nhau, nhưng có thể làm được, như bạn sẽ thấy bên dưới. Tại sao phải bận tâm? Nó khá tự nhiên khi bạn đã quen với nó, và bạn có thể dùng em để định cỡ mọi thứ, không chỉ văn bản. Bạn có thể có toàn bộ website được định cỡ bằng em, điều này giúp việc bảo trì trở nên dễ dàng.
• rem: Chúng hoạt động giống như em, ngoại trừ 1 rem bằng kích thước phông chữ được thiết lập trên phần tử gốc của tài liệu (tức là <html>), không phải phần tử cha. Điều này giúp việc tính toán kích thước phông chữ trở nên dễ dàng hơn nhiều.

font-size của một phần tử được kế thừa từ phần tử cha của nó. Tất cả bắt đầu với phần tử gốc của toàn bộ tài liệu — <html> — font-size tiêu chuẩn được thiết lập là 16px trên các trình duyệt. Bất kỳ đoạn văn nào (hoặc một phần tử khác không có kích thước khác được thiết lập bởi trình duyệt) bên trong phần tử gốc sẽ có kích thước cuối cùng là 16px. Các phần tử khác có thể có kích thước mặc định khác nhau. Ví dụ, một phần tử h1 có kích thước 2em được thiết lập theo mặc định, do đó nó sẽ có kích thước cuối cùng là 32px.

Mọi thứ trở nên phức tạp hơn khi bạn bắt đầu thay đổi kích thước phông chữ của các phần tử lồng nhau. Ví dụ, nếu bạn có một phần tử <article> trong trang và thiết lập font-size của nó là 1.5 em (sẽ tính toán ra kích thước cuối cùng là 24 px), và sau đó muốn các đoạn văn bên trong các phần tử <article> có kích thước phông chữ đã tính toán là 20 px, bạn sẽ dùng giá trị em nào?

<!-- document base font-size is 16px -->
<article>
  <!-- If my font-size is 1.5em -->
  <p>My paragraph</p>
  <!-- How do I compute to 20px font-size? -->
</article>

Bạn sẽ cần thiết lập giá trị em của nó là 20/24, tức là 0.83333333 em. Phép tính có thể phức tạp, vì vậy bạn cần cẩn thận về cách bạn tạo kiểu mọi thứ. Tốt nhất là sử dụng rem khi có thể để giữ mọi thứ đơn giản, và tránh thiết lập font-size của các phần tử container khi có thể.

Kiểu phông, độ đậm, biến đổi văn bản và trang trí văn bản

CSS cung cấp bốn thuộc tính phổ biến để thay đổi trọng lượng/nhấn mạnh trực quan của văn bản:

• font-style: Dùng để bật hoặc tắt chữ nghiêng. Các giá trị có thể như sau (bạn sẽ hiếm khi dùng thuộc tính này, trừ khi bạn muốn tắt một số kiểu nghiêng vì lý do nào đó):

  • normal: Thiết lập văn bản về phông chữ bình thường (tắt chữ nghiêng hiện có).
  • italic: Thiết lập văn bản để sử dụng phiên bản nghiêng của phông chữ, nếu có; nếu không, nó sẽ mô phỏng chữ nghiêng bằng oblique.
  • oblique: Thiết lập văn bản để sử dụng phiên bản mô phỏng của phông chữ nghiêng, được tạo bằng cách nghiêng phiên bản thông thường.

• font-weight: Thiết lập độ đậm của văn bản. Có nhiều giá trị khả dụng nếu bạn có nhiều biến thể phông chữ (như -light, -normal, -bold, -extrabold, -black, v.v.), nhưng thực tế bạn sẽ hiếm khi sử dụng bất kỳ trong số đó ngoài normal và bold:

  • normal, bold: Độ đậm phông chữ bình thường và đậm.
  • lighter, bolder: Thiết lập độ đậm của phần tử hiện tại nhẹ hơn hoặc đậm hơn một bậc so với độ đậm của phần tử cha.
  • 100 – 900: Các giá trị độ đậm số học cung cấp kiểm soát chi tiết hơn so với các từ khóa trên, nếu cần.

• text-transform: Cho phép bạn thiết lập phông chữ để biến đổi. Các giá trị bao gồm:

  • none: Ngăn bất kỳ biến đổi nào.
  • uppercase: Biến đổi tất cả văn bản thành chữ hoa.
  • lowercase: Biến đổi tất cả văn bản thành chữ thường.
  • capitalize: Biến đổi tất cả các từ để có chữ cái đầu tiên viết hoa.
  • full-width: Biến đổi tất cả các ký tự để được viết bên trong một hình vuông có chiều rộng cố định, tương tự như phông chữ monospace, cho phép căn chỉnh, ví dụ: ký tự Latin cùng với ký tự ngôn ngữ châu Á (như Trung, Nhật, Hàn).

• text-decoration: Thiết lập/bỏ thiết lập trang trí văn bản trên phông chữ (bạn chủ yếu sẽ dùng điều này để bỏ gạch chân mặc định trên các liên kết khi tạo kiểu chúng). Các giá trị khả dụng là:

  • none: Bỏ thiết lập bất kỳ trang trí văn bản nào đang có.
  • underline: Gạch chân văn bản.
  • overline: Cho văn bản một đường gạch trên.
  • line-through: Đặt một đường gạch ngang qua văn bản.

  Bạn nên lưu ý rằng text-decoration có thể nhận nhiều giá trị cùng lúc nếu bạn muốn thêm nhiều trang trí đồng thời, ví dụ: text-decoration: underline overline. Cũng lưu ý rằng text-decoration là thuộc tính tắt cho text-decoration-line, text-decoration-style, và text-decoration-color. Bạn có thể kết hợp các giá trị thuộc tính này để tạo ra các hiệu ứng thú vị, ví dụ: text-decoration: line-through red wavy.

Hãy xem cách thêm một vài trong số các thuộc tính này vào ví dụ của chúng ta:

html {
  font-size: 10px;
}

h1 {
  font-size: 5rem;
  text-transform: capitalize;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.5rem;
  color: red;
  font-family: "Helvetica", "Arial", sans-serif;
}

Kết quả mới của chúng ta như sau:

Đổ bóng văn bản

Bạn có thể áp dụng đổ bóng cho văn bản của mình bằng thuộc tính text-shadow. Thuộc tính này nhận tối đa bốn giá trị, như được hiển thị trong ví dụ bên dưới:

text-shadow: 4px 4px 5px red;

Bốn thuộc tính như sau:

1. Độ lệch ngang của bóng so với văn bản gốc — điều này có thể nhận hầu hết các đơn vị độ dài và kích thước CSS khả dụng, nhưng bạn thường dùng px; giá trị dương dịch bóng sang phải, giá trị âm dịch sang trái. Giá trị này phải được bao gồm.
2. Độ lệch dọc của bóng so với văn bản gốc. Điều này hoạt động tương tự như độ lệch ngang, ngoại trừ nó dịch chuyển bóng lên/xuống, không phải trái/phải. Giá trị này phải được bao gồm.
3. Bán kính mờ: giá trị cao hơn có nghĩa là bóng được phân tán rộng hơn. Nếu giá trị này không được bao gồm, nó mặc định là 0, có nghĩa là không mờ. Điều này có thể nhận hầu hết các đơn vị độ dài và kích thước CSS khả dụng.
4. Màu cơ bản của bóng, có thể nhận bất kỳ đơn vị màu CSS nào. Nếu không được bao gồm, nó mặc định là currentColor, tức là màu của bóng được lấy từ thuộc tính color của phần tử.

Nhiều bóng

Bạn có thể áp dụng nhiều bóng cho cùng một văn bản bằng cách bao gồm nhiều giá trị bóng được phân cách bằng dấu phẩy, ví dụ:

h1 {
  text-shadow:
    1px 1px 1px red,
    2px 2px 1px red;
}

Nếu chúng ta áp dụng điều này cho phần tử <h1> trong ví dụ Tommy The Cat của chúng ta, chúng ta sẽ có kết quả sau:

Bố cục văn bản

Sau khi đã đề cập đến các thuộc tính phông chữ cơ bản, hãy xem xét các thuộc tính chúng ta có thể sử dụng để ảnh hưởng đến bố cục văn bản.

Căn chỉnh văn bản

Thuộc tính text-align được sử dụng để kiểm soát cách văn bản được căn chỉnh trong hộp nội dung chứa nó. Các giá trị khả dụng được liệt kê bên dưới. Chúng hoạt động gần giống như cách chúng hoạt động trong một ứng dụng xử lý văn bản thông thường:

• left: Căn trái văn bản.
• right: Căn phải văn bản.
• center: Căn giữa văn bản.
• justify: Làm cho văn bản trải rộng ra, thay đổi khoảng cách giữa các từ để tất cả các dòng văn bản có cùng chiều rộng. Bạn cần sử dụng điều này cẩn thận — nó có thể trông rất tệ, đặc biệt khi áp dụng cho một đoạn văn có nhiều từ dài. Nếu bạn sẽ sử dụng điều này, bạn cũng nên nghĩ đến việc sử dụng thứ gì đó khác cùng với nó, chẳng hạn như hyphens, để ngắt một số từ dài hơn qua các dòng.

Nếu chúng ta áp dụng text-align: center; cho <h1> trong ví dụ của chúng ta, chúng ta sẽ có kết quả này:

h1 {
  text-align: center;
}

Chiều cao dòng

Thuộc tính line-height thiết lập chiều cao của mỗi dòng văn bản. Thuộc tính này không chỉ có thể nhận hầu hết các đơn vị độ dài và kích thước, mà còn có thể nhận giá trị không có đơn vị, hoạt động như một hệ số nhân và thường được coi là lựa chọn tốt nhất. Với giá trị không có đơn vị, font-size được nhân lên và cho ra line-height. Văn bản nội dung thường trông đẹp hơn và dễ đọc hơn khi các dòng cách nhau. Chiều cao dòng được khuyến nghị là khoảng 1.5 – 2 (giãn đôi). Để thiết lập các dòng văn bản của chúng ta là 1.6 lần chiều cao phông chữ, chúng ta sẽ sử dụng:

p {
  line-height: 1.6;
}

Áp dụng điều này cho các phần tử <p> trong ví dụ của chúng ta sẽ cho chúng ta kết quả này:

Khoảng cách chữ và khoảng cách từ

Các thuộc tính letter-spacing và word-spacing cho phép bạn thiết lập khoảng cách giữa các chữ cái và từ trong văn bản của mình. Bạn sẽ không sử dụng chúng thường xuyên, nhưng có thể tìm thấy cách dùng để đạt được một giao diện cụ thể, hoặc để cải thiện khả năng đọc của một phông chữ đặc biệt dày. Chúng có thể nhận hầu hết các đơn vị độ dài.

Để minh họa, chúng ta có thể áp dụng một số khoảng cách từ và khoảng cách chữ cho dòng đầu tiên của mỗi phần tử <p> trong mẫu HTML của chúng ta với:

p::first-line {
  letter-spacing: 4px;
  word-spacing: 4px;
}

Điều này hiển thị HTML của chúng ta như sau:

Các thuộc tính khác đáng xem xét

Các thuộc tính trên cho bạn ý tưởng về cách bắt đầu tạo kiểu văn bản trên trang web, nhưng còn nhiều thuộc tính khác bạn có thể dùng. Chúng ta chỉ muốn đề cập đến những thuộc tính quan trọng nhất ở đây. Khi bạn đã quen với việc sử dụng các thuộc tính trên, bạn cũng nên khám phá những thuộc tính sau:

Kiểu phông chữ:

• font-variant: Chuyển đổi giữa chữ hoa nhỏ và các lựa chọn phông thông thường.
• font-kerning: Bật và tắt các tùy chọn kerning phông chữ.
• font-feature-settings: Bật và tắt các tính năng phông OpenType khác nhau.
• font-variant-alternates: Kiểm soát việc sử dụng các ký tự thay thế cho một font-face nhất định.
• font-variant-caps: Kiểm soát việc sử dụng các ký tự hoa thay thế.
• font-variant-east-asian: Kiểm soát việc sử dụng các ký tự thay thế cho các chữ viết Đông Á, như tiếng Nhật và tiếng Trung.
• font-variant-ligatures: Kiểm soát các ligature và hình thức ngữ cảnh nào được sử dụng trong văn bản.
• font-variant-numeric: Kiểm soát việc sử dụng các ký tự thay thế cho số, phân số và dấu thứ tự.
• font-variant-position: Kiểm soát việc sử dụng các ký tự thay thế nhỏ hơn được định vị làm chỉ số trên hoặc chỉ số dưới.
• font-size-adjust: Điều chỉnh kích thước trực quan của phông chữ độc lập với kích thước phông thực tế.
• font-stretch: Chuyển đổi giữa các phiên bản kéo dãn thay thế có thể có của một phông chữ nhất định.
• text-underline-position: Chỉ định vị trí của gạch chân được thiết lập bằng giá trị underline của thuộc tính text-decoration-line.
• text-rendering: Thử thực hiện một số tối ưu hóa hiển thị văn bản.

Kiểu bố cục văn bản:

• text-indent: Chỉ định bao nhiêu không gian ngang nên được để trước khi bắt đầu dòng đầu tiên của nội dung văn bản.
• text-overflow: Định nghĩa cách nội dung bị tràn không được hiển thị được thông báo cho người dùng.
• white-space: Định nghĩa cách khoảng trắng và các dấu ngắt dòng liên quan bên trong phần tử được xử lý.
• word-break: Chỉ định có ngắt dòng trong các từ hay không.
• direction: Định nghĩa hướng văn bản. (Điều này phụ thuộc vào ngôn ngữ và thường tốt hơn là để HTML xử lý phần đó vì nó gắn liền với nội dung văn bản.)
• hyphens: Bật và tắt việc gạch nối cho các ngôn ngữ được hỗ trợ.
• line-break: Nới lỏng hoặc tăng cường ngắt dòng cho các ngôn ngữ châu Á.
• text-align-last: Định nghĩa cách dòng cuối cùng của khối hoặc một dòng, ngay trước khi ngắt dòng bắt buộc, được căn chỉnh.
• text-orientation: Định nghĩa hướng của văn bản trong một dòng.
• overflow-wrap: Chỉ định trình duyệt có thể ngắt dòng trong các từ để ngăn tràn hay không.
• writing-mode: Định nghĩa các dòng văn bản được bố trí theo chiều ngang hay dọc và hướng các dòng tiếp theo chảy theo.

Cú pháp tắt phông chữ

Nhiều thuộc tính phông chữ cũng có thể được thiết lập thông qua thuộc tính tắt font. Chúng được viết theo thứ tự sau: font-style, font-variant, font-weight, font-stretch, font-size, line-height, và font-family.

Trong số tất cả các thuộc tính đó, chỉ font-size và font-family là bắt buộc khi sử dụng thuộc tính tắt font.

Phải có dấu gạch chéo giữa thuộc tính font-size và line-height.

Một ví dụ đầy đủ trông như thế này:

font:
  italic normal bold normal 3em/1.5 "Helvetica",
  "Arial",
  sans-serif;

Thực hành tạo kiểu văn bản

Được rồi, đến lượt bạn. Với nhiệm vụ này, chúng ta không có bài tập cụ thể nào để bạn làm. Chúng ta chỉ muốn bạn thực hành với một số thuộc tính bố cục phông chữ/văn bản. Hãy xem bạn có thể tạo ra gì!

1. Nhấp vào "Play" trong khối mã bên dưới để chỉnh sửa ví dụ trong MDN Playground.
2. Thêm một số khai báo vào quy tắc p { } trống được cung cấp để thay đổi kiểu của văn bản được cung cấp. Hãy sáng tạo theo cách bạn muốn.

Nếu bạn mắc lỗi, bạn có thể xóa công việc của mình bằng nút Reset trong MDN Playground. Tham khảo các phần trước trong bài viết để tìm thêm thông tin về các kiểu phông và văn bản bạn có thể thiết lập.

<p>Some sample text for your delight</p>

p {

}

Tóm tắt

Hy vọng bạn đã thích thực hành với văn bản trong bài viết này! Bài viết tiếp theo sẽ cung cấp cho bạn tất cả những gì bạn cần biết về tạo kiểu danh sách HTML.

Xem thêm

• All about the CSS font-family property, explainers.dev
• Web-safe fonts, Scrimba ^{MDN learning partner}

• Overview: Tạo kiểu văn bản với CSS
• Next