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ữ trong 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  JavaScript Lấy độ dài mảng - độ dài của mảng trong javascript

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  Kiến thức cơ bản về JavaScript cho người mới bắt đầu: Được tóm tắt trong một bài đăng - những điều cơ bản về javascript

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  Cách tạo trang đăng nhập đầu tiên của bạn bằng HTML, CSS và JavaScript - cách tạo trang đăng nhập trong html

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ữ trong html

Change your HTML Font and Size

alt

  • Tác giả: helpvid
  • Ngày đăng: 2009-08-18
  • Đánh giá: 4 ⭐ ( 3291 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: DONATIONS https://www.paypal.com/donate?hosted_button_id=2ZEB4HLCFSG4N
    http://www.seoninjaforum.com
    In this helpvid tip of the week we will cover how to change your html font and size in Dreamweaver, making it easier for the viewer to see.

    -~-~~-~~~-~~-~-
    Please watch: “HOW TO CREATE PLAYLISTS iPHONE, iPAD, iPOD 2017”
    https://www.youtube.com/watch?v=j1d2NVDECiU
    -~-~~-~~~-~~-~-
    Website Design https://www.websitedesignaberdeen.com/

Cách phóng to, chỉnh Font chữ trang web trong Google Chrome dễ dàng

  • Tác giả: www.thegioididong.com
  • Đánh giá: 3 ⭐ ( 5914 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn bạn các bước chi tiết cách phóng to, thu nhỏ và chỉnh font chữ trang web trong Google Chrome trên điện thoại, máy tính, dễ thao tác. Click để xem ngay.

HTML – Phông chữ

  • Tác giả: isolution.pro
  • Đánh giá: 4 ⭐ ( 7262 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Phông chữ đóng một vai trò rất quan trọng trong việc làm cho một trang web thân thiện hơn với người dùng và tăng khả năng đọc nội dung. Khuôn mặt và màu sắc phông chữ phụ thuộc hoàn toàn vào máy tính và trình duyệt đang được sử dụng để xem trang của bạn nhưng bạn có thể sử…

Kích thước phông chữ CSS:Hướng dẫn về định cỡ văn bản trong CSS

  • Tác giả: vn.wsxdn.com
  • Đánh giá: 5 ⭐ ( 4046 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Các thẻ định dạng chữ và văn bản trong HTML

  • Tác giả: thachpham.com
  • Đánh giá: 5 ⭐ ( 3598 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các thẻ giúp bạn định dạng và trang trí chữ viết/văn bản trong HTML thường dùng nhất,thẻ thêm màu chữ trong HTML,thêm màu nền và font chữ vào HTML

Định dạng chữ trong HTML

  • Tác giả: webvn.com
  • Đánh giá: 3 ⭐ ( 7445 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ví dụ và cách sử dụng các thẻ định dạng trong HTML.

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

  • Tác giả: www.wikihow.vn
  • Đánh giá: 3 ⭐ ( 4221 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…

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