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 : kiểu phông chữ kiểu html

Khi tùy chỉnh giao diện trang web của mình, bạn không thể 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 .

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.

Xem Thêm  CSS Flexbox cho các thiết kế đáp ứng - sử dụng flexbox cho thiết kế đáp ứng

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

Xem Thêm  Java While Loop - sử dụng vòng lặp while trong java

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.

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ủ đề kiểu phông chữ html

Give your text ‘style’ using simple HTML in Quick Base

alt

  • Tác giả: Quick Base Junkie
  • Ngày đăng: 2018-11-27
  • Đánh giá: 4 ⭐ ( 7784 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 🤩 Get the code cheat sheet now https://quickbasejunkie.com/html-css-cheat-sheet
    Use simple HTML text formatting to alert, inform, or organize information on your forms. In this training I walk you through 6 different style options, 7 examples using combinations of these styles, and two additional ways to use formatted text on a form.

    If you’ve ever wanted to to do any of the following, now you can!
    🌈 Change the font size
    🌈 Add color to the font
    🌈 Highlight important text
    🌈 Underline a key point
    🌈 Place a box around the form instructions
    🌈 Format headers for columns of information
    🌈 Change the font used for field labels

    There are three steps to easily adding HTML text formatting to your forms:
    1. Add a text element to your form
    2. Enter the HTML code using this Cheat Sheet https://quickbasejunkie.com/html-css-cheat-sheet
    3. Check the HTML checkbox

    Time to bring your forms alive with formatted text. Get the HTML Cheat Sheet to do all this an more!

    🎦📚😃 Get more training from Quick Base Junkie https://quickbasejunkie.com/training

    Video Sections:
    0:33 Basic HTML structure
    1:24 How do I change the size of text on a form
    1:50 How to add text elements to the form settings
    2:18 How to change the color of text on a form
    2:27 How to add text decoration (underline, strikethrough, etc) on a form
    2:46 How to highlight text on a a form
    3:01 How to add borders around text on a form
    3:24 How to format a block of text on a form
    4:14 How to bring multiple formats together
    4:47 Expense report using custom text formatting
    5:00 Employee survey example using custom text formatting
    5:11 Checklist example using custom text formatting
    5:33 Using formatting to create custom column headers
    5:40 Using formatting to create custom field labels

    👍 If you find this helpful, please like & subscribe!

    ★VIDEO RESOURCES★
    HTML/CSS Cheat Sheet https://quickbasejunkie.com/html-css-cheat-sheet

    QuickBase QuickBaseJunkie QuickBaseForms HTML CSS
    HTMLStyle Database NoCode LowCode

    🔥🔥🔥FREE GUIDEBOOK🔥🔥🔥
    Get The Ultimate Grid Edit Guidebook – Using Grid Edit will never be the same!
    https://quickbasejunkie.com/gridedit

    FROM THE VIDEO: “…One of the most common formatting changes is the size…To increase the size of a font we add font – size to our style and give it a value in pixels like 14, 18, or 24. To see how these examples show up on the form let’s go into the form settings. I’ve added multiple text elements to my form in order to demonstrate this for you and when I check on the HTML box it interprets the code as HTML and renders it on the form with the formatting I defined…back to our form to change the color of the text. You can use color followed by either the name of a color or it’s hex value. The text can have a value of underlined line, through or over…The background can help you highlight important text. Its name is background – color and can also have a color value using a color name or a hex code. Borders can add emphasis as well. The values here are a little different because you need to define three parts the thickness of the border and pixels, followed by the style of the border either solid, dashed, or dotted, and then the color…so far we’ve gone through formatting of lines of text but what if you want to format a whole block of text? In that case you’ll want to include display with a value of block along with your other formatting… I have two different pieces of text that may display on an expense report with the version without HTML on the left and with it on the right…Next is some text from various employee surveys. …The text on these checklists really benefits from calling out the important notes… There are a few additional uses of HTML text on your forms that I want to share. The first is to create column headers…”

    Feeling like a Junkie? Subscribe Now!
    https://youtube.com/c/QuickBaseJunkie?sub_confirmation=1

    LET’S CONNECT!
    LinkedIn ➤ https://linkedin.com/company/quickbasejunkie/
    Instagram ➤ https://instagram.com/quickbasejunkie/
    Facebook ➤ https://fb.me/quickbasejunkie
    Pinterest ➤ https://pinterest.com/quickbasejunkie
    Quick Base Junkie ➤ https://quickbasejunkie.com

    Learn More About QuickBase @ https://quickbase.com © Quick Base Junkie
    COPYRIGHT NOTICE: The content, title, description, and specific ways in which the information in this video is organized, documented, and presented are the creative property of Quick Base Junkie. For use in any medium attribution is required, for questions or use permission, contact me @ https:/quickbasejunkie.com/contact.

    © Quick Base Junkie
    COPYRIGHT NOTICE: The content, title, description, and specific ways in which the information in this video is organized, documented, and presented are the creative property of Quick Base Junkie. For use in any medium attribution is required, for questions or use permission, contact me @ https:/quickbasejunkie.com/contact.

    Quick Base Junkie is unofficial and not affiliated with QuickBase Inc.

HTML – Phông chữ

  • Tác giả: isolution.pro
  • Đánh giá: 5 ⭐ ( 6457 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ử…

Thiết Lập Kiểu Phông Chữ Trong CSS

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 3 ⭐ ( 2953 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giải thích cú pháp và cách sử dụng thuộc tính font-style trong CSS để thiết lập kiểu phông chữ như in thường, in nghiêng, gạch dưới kèm theo source code minh hoạ.

Văn bản/ kiểu chữ (Text/Typography) trong Bootstrap 4

  • Tác giả: hoc.tv
  • Đánh giá: 3 ⭐ ( 9485 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này chúng ta sẽ tìm hiểu về các thiết lập mặc định về văn bản kiểu chữ trong Bootstrap 4. Đồng thời tìm hiểu về cách dùng các phần tử trong Bootstrap 4 để định nghĩa văn bản và kiểu chữ.

Top 21 font chữ đẹp cho website online không thể bỏ qua!

  • Tác giả: thietkeweb.vn
  • Đánh giá: 4 ⭐ ( 9376 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bạn đang muốn tìm font chữ đẹp cho web, phù hợp với nội dung mà bạn muốn truyền tải với người đọc. Vậy thì đừng bỏ qua bài viết dưới đây về các loại font chữ online dành cho trang web vừa đẹp vừa dễ dùng. 

    key phụ: font chữ chuẩn cho website/font chữ đẹp cho website/Các loại font chữ online/các font chữ trong HTML/web font chữ đẹp/

Định dạng chữ trong HTML

  • Tác giả: webvn.com
  • Đánh giá: 4 ⭐ ( 5049 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ác thẻ định dạng chữ và văn bản trong HTML

  • Tác giả: thachpham.com
  • Đánh giá: 4 ⭐ ( 3567 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

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

Xem Thêm  5 Phương pháp khác nhau để tìm độ dài của một chuỗi trong C ++? - độ dài của một chuỗi c ++

By ads_php