Khoảng trắng giữa nút css

Điều gì liên quan đến việc tạo kiểu văn bản trong CSS?

Nếu bạn đã làm việc với HTML hoặc CSS rồi, e. g. , bằng cách thực hiện các hướng dẫn này theo thứ tự, thì bạn sẽ biết rằng văn bản bên trong một phần tử được trình bày bên trong hộp nội dung của phần tử đó. Nó bắt đầu ở trên cùng bên trái của khu vực nội dung (hoặc trên cùng bên phải, trong trường hợp nội dung ngôn ngữ RTL) và chảy về cuối dòng. Khi nó kết thúc, nó chuyển xuống dòng tiếp theo và lại chảy đến cuối. Mẫu này lặp lại cho đến khi tất cả nội dung được đặt trong hộp. Nội dung văn bản hoạt động hiệu quả giống như một loạt các phần tử nội tuyến, được đặt trên các dòng liền kề với nhau và không tạo ngắt dòng cho đến khi đi đến cuối dòng hoặc trừ khi bạn buộc ngắt dòng theo cách thủ công bằng cách sử dụng phần tử

p {
  font-family: arial;
}

Ghi chú. Nếu đoạn văn trên khiến bạn cảm thấy bối rối, thì không vấn đề gì - hãy quay lại và xem lại bài viết về mô hình Hộp của chúng tôi để tìm hiểu lý thuyết về mô hình hộp trước khi tiếp tục

Các thuộc tính CSS được sử dụng để định kiểu văn bản thường được chia thành hai loại mà 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, e. g. , phông chữ nào được áp dụng, kích thước của phông chữ đó và liệu phông chữ đó có in đậm, in nghiêng, v.v.
• Các 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, ví dụ như cho phép thao tác với khoảng cách giữa các dòng và chữ cái cũng như cách văn bản được căn chỉnh trong hộp nội dung

Ghi chú. Hãy nhớ rằng tất cả văn bản bên trong một phần tử đều bị ảnh hưởng như một thực thể duy nhất. Bạn không thể chọn và tạo kiểu cho các phần con của văn bản trừ khi bạn bọc chúng trong phần tử thích hợp (chẳng hạn như

p {
  font-family: arial;
}

p {
  font-family: arial;
}

Phông chữ

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

<h1>Tommy the cath1>

<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>

Bạn có thể tìm thấy ví dụ đã hoàn thành trên GitHub (xem thêm mã nguồn)

Màu sắc

Thuộc tính

p {
  font-family: arial;
}

p {
  font-family: arial;
}

Ví dụ:

p {
  font-family: arial;
}

p {
  color: red;
}

Điều này sẽ làm cho các đoạn văn có màu đỏ, thay vì mặc định của trình duyệt tiêu chuẩn là màu đen, như vậy

<h1>Tommy the cath1>

<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>

Họ phông chữ

Để đặt một phông chữ khác cho văn bản của bạn, bạn sử dụng thuộc tính

My big red elephant

p {
  font-family: arial;
}

Điều này sẽ làm cho tất cả các đoạn trên một trang sử dụng phông chữ arial, được tìm thấy trên bất kỳ máy tính nào

Phông chữ an toàn trên web

Nói về tính khả dụng của phông chữ, chỉ có một số phông chữ nhất định 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 phải lo lắng nhiều. Đây được gọi là phông chữ an toàn trên web

Hầu hết thời gian, với tư cách là nhà phát triển web, chúng tôi muốn có quyền kiểm soát cụ thể hơn đối với phông chữ được sử dụng để hiển thị nội dung văn bản của mình. Vấn đề là tìm cách biết phông chữ nào có sẵn trên máy tính được sử dụng để xem các trang web của chúng tôi. 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 trên web được biết là có sẵn trên hầu hết các phiên bản của hệ điều hành được sử dụng nhiều 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 trên web thực tế sẽ thay đổi khi hệ điều hành phát triển, nhưng thật hợp lý khi xem xét các phông chữ an toàn trên web sau đây, ít nhất là vào thời điểm hiện tại (nhiều trong số chúng đã được phổ biến nhờ sáng kiến ​​phông chữ Microsoft Core cho Web vào cuối những năm 90

Ghi chú. Trong số các tài nguyên khác nhau, cssfontstack. trang web com duy trì một danh sách các phông chữ an toàn trên web có sẵn trên hệ điều hành Windows và macOS, có thể giúp bạn đưa ra quyết định về những gì bạn cho là an toàn cho việc sử dụng của mình

Ghi chú. Có một cách để tải xuống phông chữ tùy chỉnh cùng với trang web, cho phép bạn tùy chỉnh cách sử dụng phông chữ của mình theo bất kỳ cách nào bạn muốn. phông chữ web. Điều này phức tạp hơn một chút và chúng ta sẽ thảo luận về nó trong một bài viết riêng sau trong mô-đun

phông chữ mặc định

CSS xác định năm tên chung cho phông chữ.

My big red elephant

My big red elephant

My big red elephant

My big red elephant

My big red elephant

My big red elephant

My big red elephant

My big red elephant

My big red elephant

My big red elephant

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

My big red elephant

My big red elephant

p {
  font-family: arial;
}

My big red elephant

My big red elephant

p {
  font-family: arial;
}

My big red elephant

My big red elephant

p {
  font-family: arial;
}

My big red elephant

My big red elephant

p {
  color: red;
}

My big red elephant

My big red elephant

p {
  color: red;
}

ngăn xếp phông chữ

Vì bạn không thể đảm bảo có sẵn các phông chữ bạn muốn sử dụng trên các trang web của mình (thậm chí một phông chữ web có thể bị lỗi vì lý do nào đó), bạn có thể cung cấp một ngăn xếp phông chữ để trình duyệt có nhiều phông chữ mà trình duyệt có thể chọn. Điều này liên quan đến một giá trị

My big red elephant

p {
  color: red;
}

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

Bạn nên cung cấp một tên phông chữ chung phù hợp ở cuối ngăn xếp để nếu không có phông chữ nào được liệt kê, thì ít nhất trình duyệt có thể cung cấp một cái gì đó tương đối phù hợp. Để nhấn mạnh điểm này, các đoạn văn đượ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 tốt cho phông chữ sans-serif

Ghi chú. Tên phông chữ có nhiều hơn một từ — như

p {
  font-family: arial;
}

p {
  font-family: arial;
}

Một ví dụ về họ phông chữ

Hãy thêm vào ví dụ trước của chúng ta, cung cấp cho các đoạn văn một phông chữ sans-serif

p {
  color: red;
}

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

<h1>Tommy the cath1>

<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>

Cỡ chữ

Trong bài viết về đơn vị và giá trị CSS của mô-đun trước, chúng ta đã xem xét các đơn vị kích thước và độ dài. Kích thước phông chữ (được đặt bằng thuộc tính

My big red elephant

• My big red elephant

  1 (điểm ảnh). Số lượng pixel cao mà bạn muốn văn bản được. Đây là một đơn vị tuyệt đối — nó dẫn đến cùng một giá trị tính toán cuối cùng cho phông chữ trên trang trong hầu hết mọi tình huống

• My big red elephant

  2s. 1

  My big red elephant

  2 bằng với kích thước phông chữ được đặt trên phần tử cha của phần tử hiện tại mà chúng tôi đang tạo kiểu (cụ thể hơn là chiều rộng của chữ in hoa M có trong phần tử cha). Điều này có thể trở nên khó giải quyết nếu bạn có nhiều phần tử lồng nhau với các kích thước phông chữ khác nhau được đặt, nhưng có thể thực hiện được, như bạn sẽ thấy bên dưới. Quan tâm làm gì? . Bạn có thể có toàn bộ trang web có kích thước bằng cách sử dụng

  My big red elephant

  2, giúp bảo trì dễ dàng

• My big red elephant

  6s. Những công việc này giống như

  My big red elephant

  2, ngoại trừ 1

  My big red elephant

  6 bằng với kích thước phông chữ được đặt trên phần tử gốc của tài liệu (i. e.

  My big red elephant

  9), không phải phần tử cha. Điều này làm cho việc tính toán kích thước phông chữ của bạn dễ dàng hơn nhiều, mặc dù nếu bạn muốn hỗ trợ các trình duyệt thực sự cũ, bạn có thể gặp khó khăn —

  My big red elephant

  6 không được hỗ trợ trong Internet Explorer 8 trở xuống

My big red elephant

My big red elephant

My big red elephant

p {
  font-family: arial;
}

p {
  font-family: arial;
}

p {
  font-family: arial;
}

p {
  font-family: arial;
}

p {
  font-family: arial;
}

Mọi thứ trở nên khó khăn 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ó phần tử

p {
  font-family: arial;
}

My big red elephant

My big red elephant

My big red elephant

p {
  font-family: arial;
}

My big red elephant

My big red elephant

p {
  color: red;
}

Bạn sẽ cần đặt giá trị

My big red elephant

My big red elephant

My big red elephant

My big red elephant

Kiểu phông chữ, trọng lượng phông chữ, 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/điểm nhấn trực quan của văn bản

• p {
    font-family: arial;
  }
  

  90. Được sử dụng để bật hoặc tắt văn bản in nghiêng. Các giá trị có thể như sau (bạn sẽ hiếm khi sử dụng giá trị này, trừ khi bạn muốn tắt một số kiểu chữ nghiêng vì lý do nào đó)

  • p {
      font-family: arial;
    }
    

    91. Đặt văn bản thành phông chữ bình thường (tắt chữ in nghiêng hiện có)

  • p {
      font-family: arial;
    }
    

    92. Đặt văn bản để sử dụng phiên bản in nghiêng của phông chữ, nếu có;

  • p {
      font-family: arial;
    }
    

    93. Đặt 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 bình thường

• p {
    font-family: arial;
  }
  

  94. Đặt độ đậm của văn bản. Điều này có sẵn nhiều giá trị trong trường hợp bạn có sẵn nhiều biến thể phông chữ (chẳng hạn như -light, -normal, -bold, -extrabold, -black, v.v. ), nhưng trên thực tế, bạn sẽ hiếm khi sử dụng chúng ngoại trừ

  p {
    font-family: arial;
  }
  

  91 và

  p {
    font-family: arial;
  }
  

  96

  • p {
      font-family: arial;
    }
    

    91,

    p {
      font-family: arial;
    }
    

    96. Trọng lượng phông chữ bình thường và đậm

  • p {
      font-family: arial;
    }
    

    99,

    p {
      color: red;
    }
    

    00. Đặt độ đậm của phần tử hiện tại nhẹ hơn hoặc nặng hơn một bước so với độ đậm của phần tử gốc của nó

  • p {
      color: red;
    }
    

    01 –

    p {
      color: red;
    }
    

    02. Các giá trị độ đậm dạng số cung cấp khả năng kiểm soát chi tiết hơn so với các từ khóa ở trên, nếu cần

• p {
    color: red;
  }
  

  03. Cho phép bạn đặt phông chữ của mình được chuyển đổi. Giá trị bao gồm

  • p {
      color: red;
    }
    

    04. Ngăn chặn bất kỳ chuyển đổi

  • p {
      color: red;
    }
    

    05. Chuyển đổi tất cả văn bản thành chữ hoa

  • p {
      color: red;
    }
    

    06. Chuyển đổi tất cả văn bản thành chữ thường

  • p {
      color: red;
    }
    

    07. Biến đổi tất cả các từ để có chữ cái đầu tiên viết hoa

  • p {
      color: red;
    }
    

    08. Biến đổi tất cả các nét chữ để 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ữ đơn cách, cho phép căn chỉnh, e. g. , các ký tự Latinh cùng với các nét chữ của ngôn ngữ châu Á (như tiếng Trung, tiếng Nhật, tiếng Hàn)

• p {
    font-family: arial;
  }
  

  9. Đặt/bỏ đặt trang trí văn bản trên phông chữ (chủ yếu bạn sẽ sử dụng điều này để bỏ đặt gạch chân mặc định trên các liên kết khi tạo kiểu cho chúng). giá trị có sẵn là

  • p {
      color: red;
    }
    

    04. Bỏ đặt bất kỳ trang trí văn bản nào đã có

  • p {
      color: red;
    }
    

    11. Gạch dưới văn bản

  • p {
      color: red;
    }
    

    12. Cung cấp cho văn bản một dòng

  • p {
      color: red;
    }
    

    13. Đặt gạch ngang trên văn bản
  Bạn cần lưu ý rằng

  p {
    font-family: arial;
  }
  

  9 có thể chấp nhận nhiều giá trị cùng lúc nếu bạn muốn thêm nhiều trang trí cùng lúc, ví dụ:

  p {
    color: red;
  }
  

  15. Cũng lưu ý rằng

  p {
    font-family: arial;
  }
  

  9 là thuộc tính viết tắt của

  p {
    color: red;
  }
  

  17,

  p {
    color: red;
  }
  

  18 và

  p {
    color: red;
  }
  

  19. Bạn có thể sử dụng kết hợp các giá trị thuộc tính này để tạo các hiệu ứng thú vị, ví dụ:.

  p {
    color: red;
  }
  

  20

Hãy xem xét thêm một vài thuộc tính này vào ví dụ của chúng tôi

Kết quả mới của chúng tôi là như vậy

<h1>Tommy the cath1>

<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>

p {
  color: red;
}

Văn bản đổ bóng

Bạn có thể áp dụng bóng đổ cho văn bản của mình bằng thuộc tính

p {
  color: red;
}

<h1>Tommy the cath1>

<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>

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ể sử dụng hầu hết các đơn vị kích thước và độ dài CSS có sẵn, nhưng bạn sẽ sử dụng phổ biến nhất là

   My big red elephant

   1; . 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ư bù ngang, ngoại trừ việc nó di 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ó sẽ mặc định là 0, có nghĩa là không mờ. Điều này có thể chiếm hầu hết các đơn vị kích thước và chiều dài CSS có sẵn
4. Màu cơ bản của bóng, có thể lấy bất kỳ đơn vị màu CSS nào. Nếu không bao gồm, nó sẽ mặc định là

   p {
     color: red;
   }
   

   23, tôi. e. màu của bóng được lấy từ thuộc tính

   p {
     font-family: arial;
   }
   

   8 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 tách bằng dấu phẩy, chẳng hạn

<h1>Tommy the cath1>

<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>

Nếu chúng ta áp dụng điều này cho phần tử

p {
  font-family: arial;
}

<h1>Tommy the cath1>

<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>

p {
  color: red;
}

Ghi chú. Bạn có thể xem thêm các ví dụ thú vị về cách sử dụng

p {
  color: red;
}

bố cục văn bản

Với các thuộc tính phông chữ cơ bản, chúng ta hãy xem các thuộc tính mà chúng ta có thể sử dụng để tác động đến bố cục văn bản

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

Thuộc tính

p {
  color: red;
}

• p {
    color: red;
  }
  

  28. Căn trái văn bản

• p {
    color: red;
  }
  

  29. Căn phải văn bản

• p {
    color: red;
  }
  

  30. Căn giữa văn bản

• p {
    color: red;
  }
  

  31. Làm cho văn bản trải 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 một cách cẩn thận — nó có thể trông rất tệ, đặc biệt là khi áp dụng cho một đoạn văn có nhiều từ dài trong đó. Nếu bạn định sử dụng cái này, bạn cũng nên nghĩ đến việc sử dụng cái gì khác cùng với nó, chẳng hạn như

  p {
    color: red;
  }
  

  32, để ngắt một số từ dài hơn giữa các dòng

Nếu chúng tôi áp dụng

p {
  color: red;
}

p {
  font-family: arial;
}

<h1>Tommy the cath1>

<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>

<h1>Tommy the cath1>

<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>

Chiều cao giữa các dòng

Thuộc tính

p {
  color: red;
}

My big red elephant

p {
  color: red;
}

<h1>Tommy the cath1>

<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>

Áp dụng điều này cho các phần tử

p {
  color: red;
}

<h1>Tommy the cath1>

<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>

<h1>Tommy the cath1>

<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>

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

Thuộc tính

p {
  color: red;
}

p {
  color: red;
}

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

p {
  color: red;
}

<h1>Tommy the cath1>

<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>

Điều này làm cho HTML của chúng tôi là

<h1>Tommy the cath1>

<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>

p {
  font-family: arial;
}

Các tài sản khác đáng xem

Các thuộc tính trên cung cấp 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 bạn có thể sử dụng nhiều thuộc tính khác. Chúng tôi chỉ muốn bao gồm những cái quan trọng nhất ở đây. Khi bạn đã quen với việc sử dụng những điều trên, bạn cũng nên khám phá những điều sau

Kiểu phông chữ

• p {
    color: red;
  }
  

  42. Chuyển đổi giữa chữ hoa nhỏ và các lựa chọn thay thế phông chữ thông thường

• p {
    color: red;
  }
  

  43. Bật và tắt tùy chọn kerning phông chữ

• p {
    color: red;
  }
  

  44. Bật và tắt các tính năng phông chữ OpenType khác nhau

• p {
    color: red;
  }
  

  45. Kiểm soát việc sử dụng các nét tượng thay thế cho một mặt phông chữ nhất định

• p {
    color: red;
  }
  

  46. Kiểm soát việc sử dụng các ký tự viết hoa thay thế

• p {
    color: red;
  }
  

  47. Kiểm soát việc sử dụng các nét tượng thay thế cho các chữ viết Đông Á, như tiếng Nhật và tiếng Trung

• p {
    color: red;
  }
  

  48. Kiểm soát các chữ ghép và hình thức theo ngữ cảnh được sử dụng trong văn bản

• p {
    color: red;
  }
  

  49. Kiểm soát việc sử dụng các nét tượng thay thế cho số, phân số và dấu thứ tự

• p {
    color: red;
  }
  

  50. Kiểm soát việc sử dụng các nét tượng thay thế có kích thước nhỏ hơn được định vị là chỉ số trên hoặc chỉ số dưới

• p {
    color: red;
  }
  

  51. Đ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 chữ thực của nó

• p {
    color: red;
  }
  

  52. Chuyển đổi giữa các phiên bản kéo dài thay thế có thể có của một phông chữ nhất định

• p {
    color: red;
  }
  

  53. Chỉ định vị trí của bộ gạch chân bằng cách sử dụng giá trị

  p {
    color: red;
  }
  

  11 thuộc tính

  p {
    color: red;
  }
  

  17

• p {
    color: red;
  }
  

  56. Cố gắng thực hiện một số tối ưu hóa kết xuất văn bản

Các kiểu bố cục văn bản

• p {
    color: red;
  }
  

  57. Chỉ định khoảng cách ngang nên để lại trước khi bắt đầu dòng đầu tiên của nội dung văn bản

• p {
    color: red;
  }
  

  58. Xác định cách báo hiệu cho người dùng biết nội dung bị tràn không hiển thị

• p {
    color: red;
  }
  

  59. Xác định cách xử lý khoảng trắng và ngắt dòng liên quan bên trong phần tử

• p {
    color: red;
  }
  

  60. Chỉ định có ngắt dòng trong các từ hay không

• p {
    color: red;
  }
  

  61. Xác định hướng văn bản. (Điều này phụ thuộc vào ngôn ngữ và thông thường sẽ tốt hơn nếu để HTML xử lý phần đó vì nó được gắn với nội dung văn bản. )

• p {
    color: red;
  }
  

  32. Bật và tắt gạch nối cho các ngôn ngữ được hỗ trợ

• p {
    color: red;
  }
  

  63. Thư giãn hoặc tăng cường ngắt dòng cho các ngôn ngữ châu Á

• p {
    color: red;
  }
  

  64. Xác định cách dòng cuối cùng của một khối hoặc một dòng, ngay trước dấu ngắt dòng bắt buộc, được căn chỉnh

• p {
    color: red;
  }
  

  65. Xác định hướng của văn bản trong một dòng

• p {
    color: red;
  }
  

  66. Chỉ định xem trình duyệt có thể ngắt dòng trong các từ hay không để tránh tràn

• p {
    color: red;
  }
  

  67. Xác định xem các dòng văn bản được bố trí theo chiều ngang hay chiều dọc và hướng của các dòng tiếp theo

tốc ký phông chữ

Nhiều thuộc tính phông chữ cũng có thể được đặt thông qua thuộc tính tốc ký

p {
  color: red;
}

p {
  font-family: arial;
}

p {
  color: red;
}

p {
  font-family: arial;
}

p {
  color: red;
}

My big red elephant

p {
  color: red;
}

My big red elephant

Trong số tất cả các thuộc tính đó, chỉ có

My big red elephant

My big red elephant

p {
  color: red;
}

Dấu gạch chéo phải được đặt ở giữa các thuộc tính

My big red elephant

p {
  color: red;
}

Một ví dụ đầy đủ sẽ như thế này

p {
  font-family: arial;
}

học tích cực. Chơi với văn bản kiểu dáng

Trong phần học tích cực này, chúng tôi không có bất kỳ bài tập cụ thể nào để bạn làm. Chúng tôi chỉ muốn bạn chơi tốt với một số thuộc tính bố cục phông chữ/văn bản. Xem cho chính mình những gì bạn có thể nghĩ ra. Bạn có thể thực hiện việc này bằng tệp HTML/CSS ngoại tuyến hoặc nhập mã của mình vào ví dụ trực tiếp có thể chỉnh sửa bên dưới

Nếu bạn mắc lỗi, bạn luôn có thể đặt lại bằng nút Đặt lại

p {
  font-family: arial;
}

p {
  font-family: arial;
}

Bản tóm tắt

Chúng tôi hy vọng bạn thích chơi 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ề cách tạo kiểu danh sách HTML