Tìm hiểu cách sử dụng HTML và CSS để thay đổi loại phông chữ, kích thước và màu sắc của bạn và tạo một trang web thực sự độc đáo.

Bạn đang xem : cách thay đổi phông chữ bằng html

Khi tùy chỉnh giao diện trang web của mình, bạn có thể đừng quên kiểu chữ – cách bạn sắp xếp và tạo kiểu cho văn bản trên trang. Tùy thuộc vào thương hiệu của bạn, bạn sẽ muốn thay đổi kiểu chữ, kích thước và màu sắc của phông chữ cho phù hợp.

Ví dụ: nếu bạn ưu tiên màu xám đậm hơn màu đen trong bảng màu , bạn sẽ muốn thay đổi màu phông chữ mặc định của văn bản. Nếu bạn đang làm trong lĩnh vực truyền thông, bạn có thể chọn phông chữ sans serif, được coi là kiểu chữ dễ đọc nhất. Nhưng nếu bạn đang làm trong lĩnh vực sáng tạo, bạn có thể chọn kiểu chữ trang trí hơn. Đây chỉ là một vài lý do bạn có thể muốn tạo kiểu phông chữ trên trang web của mình.

Tải xuống ngay: Hack HTML & amp; CSS miễn phí < / span>

Trong bài đăng này, chúng tôi sẽ chỉ cho bạn cách thay đổi phông chữ của bạn trong HTML để giúp bản sao của bạn nổi bật, thu hút người đọc và thúc đẩy chuyển đổi.

Cách thay đổi phông chữ trong HTML

Hãy xem cách bạn có thể thay đổi phông chữ trên trang web của mình chỉ với bit mã . Chúng tôi sẽ đề cập đến:

Hãy bắt đầu.

Cách thay đổi kiểu phông chữ trong HTML

Để thay đổi loại phông chữ hoàn toàn bằng HTML, hãy sử dụng thuộc tính họ phông chữ CSS. Đặt nó thành giá trị bạn muốn và đặt nó bên trong thuộc tính style. Sau đó, thêm thuộc tính style này vào một phần tử HTML, chẳng hạn như đoạn văn, tiêu đề, nút hoặc thẻ span.

Mặc dù phương pháp này chỉ yêu cầu bạn thêm mã vào tệp HTML của mình, nhưng nó thực sự sử dụng ngôn ngữ kiểu CSS . Cụ thể hơn, kỹ thuật này được gọi là CSS nội tuyến. CSS nội tuyến có nghĩa là HTML và CSS của bạn sẽ được đặt cùng nhau trong phần nội dung của tài liệu HTML.

Tài nguyên Nổi bật

Hướng dẫn dành cho Người mới bắt đầu về HTML

Điền vào biểu mẫu để có phần giới thiệu miễn phí về hướng dẫn HTML.

Hãy xem một ví dụ cơ bản: sử dụng CSS nội tuyến để thay đổi loại phông chữ của đoạn văn. Tôi sẽ thêm thuộc tính style vào phần tử đoạn đầu tiên, điều đó có nghĩa là chỉ đoạn này mới được tạo kiểu. Đoạn văn và các tiêu đề khác trên trang sẽ vẫn là Times New Roman, loại phông chữ mặc định trong hầu hết các trình duyệt.

Xem bài viết Cách thay đổi loại phông chữ trong HTML [CSS nội tuyến] của HubSpot ( @hubspot ) trên CodePen .

Mặc dù CSS nội tuyến hoạt động tốt khi thay đổi một phần tử trên trang, chúng tôi khuyên bạn nên các kiểu CSS khác , cụ thể là CSS bên ngoài, thay vì CSS nội tuyến. < / p>

CSS bên ngoài được đặt trong một tệp CSS, tách biệt với HTML. Đối với hầu hết các nhà phát triển, đây được coi là cách chính xác để thay đổi mặt phông chữ trong HTML vì bạn không cần sao chép và dán các quy tắc kiểu giống nhau vào mỗi thẻ. Thay vào đó, chỉ cần nhắm mục tiêu tất cả một loại phần tử bằng CSS selector .

Xem Thêm  (Lưu trữ) HTML: Bảng: Căn chỉnh trong bảng - căn chỉnh dữ liệu trong một ô bảng

Bạn muốn tìm hiểu thêm về HTML? Tải xuống hướng dẫn miễn phí của chúng tôi là tốt nhất thực hành để bắt đầu với HTML.

Ví dụ: giả sử tôi muốn thay đổi phông chữ của mọi phần tử đoạn văn thành Arial. Tôi có thể sử dụng bộ chọn CSS “p” để nhắm mục tiêu tất cả các đoạn văn:

Xem bài viết Cách thay đổi loại phông chữ trong HTML [Internal CSS] của HubSpot ( @hubspot ) trên CodePen .

Bạn có thể sử dụng CSS bên ngoài với mã CSS thuần túy hoặc được ghép nối với một khung như Bootstrap CSS .

Giờ chúng ta đã hiểu cách thay đổi loại phông chữ, hãy chuyển sự chú ý của chúng ta đến kích thước phông chữ.

Cách thay đổi kích thước phông chữ trong HTML

Để thay đổi kích thước phông chữ trong HTML, hãy sử dụng thuộc tính kích thước phông chữ CSS. Đặt nó thành giá trị bạn muốn và đặt nó bên trong thuộc tính style. Sau đó, thêm thuộc tính style này vào một phần tử HTML, chẳng hạn như đoạn văn, tiêu đề, nút hoặc thẻ span.

Tiếp tục với ví dụ của chúng tôi ở trên, hãy thay đổi kích thước phông chữ của đoạn văn thành 26 pixel bằng CSS. Tương tự như trên, tôi sẽ bắt đầu bằng cách thêm thuộc tính style vào phần tử đoạn đầu tiên, có nghĩa là chỉ đoạn này mới được tạo kiểu. Đoạn văn và tiêu đề khác trên trang sẽ giữ nguyên kích thước mặc định.

Xem bài viết Cách thay đổi kích thước phông chữ trong HTML [CSS nội tuyến] của HubSpot ( @hubspot ) trên CodePen .

Bây giờ, giả sử tôi muốn thay đổi phông chữ của mọi phần tử đoạn văn thành 26px. Tôi có thể sử dụng công cụ chọn CSS để nhắm mục tiêu tất cả các đoạn văn:

Xem bài viết Cách thay đổi kích thước phông chữ trong HTML [Internal CSS] của HubSpot ( @hubspot ) trên CodePen .

Thay đổi kích thước phông chữ trong cùng một đoạn văn

Một ưu điểm khác của CSS là nó cung cấp cho bạn khả năng kiểm soát chi tiết hơn đối với mã của bạn, vì vậy bạn có thể làm những việc như áp dụng các kích thước phông chữ khác nhau cho văn bản bên trong cùng một đoạn văn.

Nếu tôi muốn giữ đoạn văn ở kích thước phông chữ mặc định, tôi có thể chỉ cần bọc văn bản mà tôi muốn thay đổi kích thước trong & lt; span & gt; các thẻ. Sau đó, tôi sẽ thêm thuộc tính style với thuộc tính font-size được đặt thành giá trị mà tôi muốn.

Xem bút pháp Cách thay đổi kích thước phông chữ trong cùng một đoạn [CSS nội tuyến] của HubSpot ( @hubspot ) trên CodePen < / span>.

Để đạt được hiệu ứng này với CSS bên ngoài, tôi sẽ vẫn bọc văn bản mà tôi muốn thay đổi kích thước trong & lt; span & gt; các thẻ. Tuy nhiên, tôi sẽ thêm thuộc tính ID vào phần tử span. Sử dụng công cụ chọn ID, tôi đặt phần tử span thành một kích thước khác.

Xem Thêm  Định dạng chuỗi của Python () Trang tính gian lận - chuỗi định dạng trong python

Xem cây bút do Thay đổi kích thước phông chữ trong cùng một đoạn [Internal CSS] của HubSpot ( @hubspot ) trên CodePen < / span>.

Để có cái nhìn sâu hơn về các thuộc tính và giá trị bạn có thể sử dụng để thay đổi kích thước văn bản của mình, hãy đọc Cách thay đổi kích thước phông chữ trong CSS .

Cách thay đổi màu phông chữ trong HTML

Để thay đổi màu phông chữ trong HTML, hãy sử dụng thuộc tính màu CSS. Đặt nó thành giá trị bạn muốn và đặt nó bên trong thuộc tính style. Sau đó, thêm thuộc tính style này vào một phần tử HTML như đoạn văn, tiêu đề, nút hoặc thẻ span.

Bây giờ, hãy thay đổi màu phông chữ của đoạn văn thành màu cam Lorax ( mã màu # FF7A59) bằng CSS. Tương tự như trên, tôi sẽ bắt đầu bằng cách thêm thuộc tính style vào phần tử đoạn đầu tiên, có nghĩa là chỉ đoạn này mới được tạo kiểu. Đoạn văn và các tiêu đề khác trên trang sẽ vẫn có màu mặc định (đen).

Xem bút pháp Cách thay đổi màu phông chữ trong HTML [CSS nội tuyến] của HubSpot ( @hubspot ) trên CodePen .

Bây giờ, giả sử tôi muốn thay đổi màu của mọi phần tử đoạn văn thành màu hạt dẻ. Tôi có thể sử dụng công cụ chọn CSS để nhắm mục tiêu tất cả các đoạn văn có CSS ​​bên ngoài:

Xem bút pháp Cách thay đổi màu phông chữ trong HTML [Internal CSS] của HubSpot ( @hubspot ) trên CodePen .

Để tìm hiểu cách thay đổi màu nền của văn bản, hãy đọc Cách thay đổi màu văn bản và màu nền trong CSS .

Cách thay đổi phông chữ trong một đơn vị trong HTML

Một div trong HTML chỉ đơn giản là một phần tử chung có thể chia trang web của bạn thành các phần để bạn có thể nhắm mục tiêu chúng bằng các thuộc tính CSS duy nhất. Thay đổi phông chữ trong một div không khác gì thay đổi phông chữ trong một đoạn văn hoặc phần tử span.

Nếu bạn muốn thay đổi loại phông chữ, kích thước và màu sắc của văn bản trên một trang, bạn có thể bọc nó trong thẻ div và sử dụng công cụ chọn CSS để tạo kiểu cho phần tử đó.

Xem Bút ký Cách thay đổi phông chữ trong một Div trong HTML [Internal CSS] của HubSpot ( @hubspot ) trên CodePen < / span>.

Thẻ phông chữ HTML

Các nhà phát triển từng có thể sử dụng thẻ có tên & lt; font & gt; để thay đổi kiểu văn bản trong HTML. Nếu bạn muốn thay đổi phông chữ của mình thành Arial, bạn phải viết dòng HTML sau:

  

& lt; font face = "Arial" & gt; Văn bản của bạn ở đây. & lt; / font & gt;

Tuy nhiên, thẻ phông chữ không được dùng nữa vào năm 1998 và đã được thay thế bằng CSS. Định dạng CSS là một giải pháp thay thế linh hoạt và nhẹ hơn cho thẻ phông chữ HTML.

Xem Thêm  Mảng Python - tạo một mảng python

Cách tốt nhất để thay đổi phông chữ trong HTML & amp; CSS

Với một số kiến ​​thức cơ bản về thiết kế web, bạn có thể thay đổi loại, kích thước và màu sắc phông chữ của mình. Điều này có thể cho phép bạn tùy chỉnh mọi chi tiết trên trang web của mình và làm cho nội dung của bạn dễ đọc hơn.

Ghi chú của người biên tập: Bài đăng này ban đầu được xuất bản vào tháng 7 năm 2020 và đã được cập nhật để có tính toàn diện.

Gọi hành động mới


Xem thêm những thông tin liên quan đến chủ đề cách thay đổi phông chữ bằng html

Cách dùng Google Fonts nè 🧐

alt

  • Tác giả: Minhco nguyen
  • Ngày đăng: 2020-08-18
  • Đánh giá: 4 ⭐ ( 6742 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách sử dụng google font để thay đổi font của trang web nhé 🤟🤟🤟

Cách căn chỉnh văn bản trong HTML

  • Tác giả: vi.softoban.com
  • Đánh giá: 3 ⭐ ( 8108 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ngôn ngữ đánh dấu siêu văn bản là ngôn ngữ cơ bản để thiết kế một trang web. Html được biết đến là một ngôn ngữ front-end để thiết kế giao diện của một trang web. Có rất nhiều chức năng liên quan đến ngôn ngữ này. Căn chỉnh là một thành phần quan trọng trong thiết kế vì nó xác định nội dung tương ứng để xử lý tại một địa điểm cụ thể. Cách căn chỉnh văn bản trong HTML được thảo luận với các ví dụ trong bài viết này.

Cách thay đổi kích thước phông chữ HTML trong CSS

  • Tác giả: funix.edu.vn
  • Đánh giá: 5 ⭐ ( 9019 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Là một developer, bạn sẽ không thể tiến xa nếu không biết cách thay đổi kích thước phông chữ trong CSS. Bài viết này sẽ hướng dẫn bạn cách thực hiện.

Font Chữ Instagram ❤️️ Đổi Phông Chữ 1001 Form Chữ IG

  • Tác giả: symbols.vn
  • Đánh giá: 4 ⭐ ( 5320 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Đổi Font Chữ Instagram Đẹp ❤️️ Đổi Phông Chữ Instagram Online Với 1001 Form Chữ IG ✅ Viết Chữ Kiểu Instagram Story 💘 Phông Chữ Ins Bio.

Làm cách nào để nhúng phông chữ vào HTML?

  • Tác giả: qastack.vn
  • Đánh giá: 5 ⭐ ( 7679 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Mọi thứ đã thay đổi kể từ khi câu hỏi này ban đầu được hỏi và…

Cách để Dùng thẻ màu chữ trên HTML

  • Tác giả: www.wikihow.vn
  • Đánh giá: 5 ⭐ ( 8493 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Cách để Dùng thẻ màu chữ trên HTML. Đây là bài viết hướng dẫn cách thay đổi màu chữ trong văn bản HTML. Mặc dù thẻ kiểu chữ HTML đã lỗi thời trong HTML5, nhưng bạn có thể dùng CSS để tạo màu cho nội dung trên trang HTML. Nếu sử dụng phiên…

Thay đổi nội dung của thẻ HTML bằng Javascript

  • Tác giả: freetuts.net
  • Đánh giá: 3 ⭐ ( 3513 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: ử dụng kiến thức đã học hãy viết chương trình gồm 2 button và 1 thẻ div, khi click vào button thứ nhất thì thiết lập nội dung cho thẻ div là

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

By ads_php