Bạn đang xem : cách thêm nhiều họ phông chữ trong css

Cách thêm họ phông chữ trong CSS

Last Cập nhật: Ngày 1 tháng 4 năm 2022

Trong hướng dẫn này, chúng tôi sẽ chỉ cho bạn giải pháp về cách thêm họ phông chữ trong CSS, sử dụng phông chữ duy nhất trên trang web của bạn là một cách tiếp cận tuyệt vời để làm cho thiết kế của bạn nổi bật trong đám đông. Lúc đầu, các nhà thiết kế bị giới hạn trong các kiểu chữ hệ thống phổ biến như Arial, Helvetica, Verdana và Times New Roman.

Thay thế hình ảnh hoặc các plugin như Flash là những cách duy nhất để sử dụng phông chữ riêng một cách đáng tin cậy. Nhưng bây giờ thời thế đã thay đổi và hướng dẫn này sẽ chỉ cho bạn cách thêm bất kỳ phông chữ nào vào trang web của bạn theo cách từng bước.

Hướng dẫn từng bước về cách thêm họ phông chữ trong CSS: –

Nếu một kiểu chữ hệ thống khiến người quản lý tiếp thị của bạn loay hoay, thì có một số kho lưu trữ cung cấp nhiều lựa chọn kiểu chữ mã nguồn mở có thể được cung cấp bằng cách sử dụng mạng phân phối nội dung. Trong số các lựa chọn phổ biến nhất là:

  • Phông chữ của Google
  • Thư viện Phông chữ
  • Adobe Edge

Google Fonts có một thư viện lớn với hơn 1000 phông chữ libre có thể được duyệt qua thư mục web tương tác của chúng.

Phông chữ Google có lẽ là phông chữ dễ dàng nhất để thêm vào trang web của bạn nhờ API nhà phát triển của chúng và đây là nơi tôi sẽ bắt đầu tìm kiếm của bạn.

Chúng tôi sẽ sử dụng Phông chữ Google cho hướng dẫn này.

& lt;! DOCTYPE html & gt;
& lt; html & gt;
& lt; đầu & gt;
& lt; title & gt; & lt; / title & gt;
& lt; phong cách & gt;

@import url ('https://fonts.googleapis.com/css?family=Muli&display=swap');
@import url ('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
thân hình {
  font-family: 'Muli', sans-serif;
  màu: rgba (0, 0, 0, 0.8);
  font-weight: 200;
  chiều cao dòng: 1,22;
  khoảng cách giữa các chữ cái: -.004em;
  font-size: 30px;
  đệm: 100px;
}

h1 {
  font-family: 'Quicksand', sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 40px;
  chiều cao dòng: 1,17;
  khoảng cách giữa các chữ cái: -.03em;
 }

& lt; / style & gt;
& lt; / head & gt;
& lt; body & gt;

& lt; h1 & gt; Phông chữ tùy chỉnh & lt; / h1 & gt;
& lt; p & gt;
Đây là văn bản mẫu
& lt; p & gt;

& lt; / body & gt;
& lt; / html & gt;
  1. Để bắt đầu, hãy nhập & lt ;! DOCTYPE html & gt; điều đó cho biết rằng tệp ở định dạng HTML đối với trình duyệt web.
  2. & lt; html & gt; mặt khác, phần tử này được sử dụng để cho biết rằng nội dung HTML sắp bắt đầu.
  3. Thông tin về các trang web hiện được chứa trong & lt; head & gt; nhãn. Thẻ này sử dụng & lt; tiêu đề & gt; phần tử để cung cấp tiêu đề trang web. & Lt; đầu & gt; và & lt; tiêu đề & gt; các thẻ, ví dụ, là các thẻ được ghép nối. Do đó, cả hai đều có thẻ đóng & lt; / head & gt; và & lt; / title & gt ;.
  4. Cuối cùng, & lt; body & gt; phần tử được sử dụng để chỉ định nội dung của trang web. Tất cả nội dung của trang web sẽ được viết ở đây. Chúng tôi đã sử dụng thẻ tiêu đề & lt; h1 & gt; và thẻ nội dung của & lt; p & gt ;.
  5. Đối với & lt; body & gt; và & lt; h1 & gt ;, chúng tôi đã nhập các Phông chữ Google “Muli” và “Cát lún” tương ứng.
  6. Họ phông chữ cho từng phần tử (& lt; body & gt; và & lt; h1 & gt;) sau đó đã được chỉ định.
  7. Trong thẻ head, & lt; style & gt; thẻ đã được sử dụng. Sau đó, hai phần tử được tạo kiểu riêng bằng cách sử dụng các đặc điểm như màu sắc, độ đậm của phông chữ, kiểu phông chữ, kích thước phông chữ, chiều cao dòng, khoảng cách giữa các chữ cái và các đặc điểm khác.
  8. Các thẻ đóng cho & lt; body & gt; và & lt; html & gt; thẻ & lt; / body & gt; và & lt; / html & gt ;, tương ứng.
Xem Thêm  Bài tập vòng lặp trong C++ - bài tập vòng lặp

Kết luận: –

Bạn có thể thay đổi loại, kích thước và màu sắc phông chữ của mình bằng một số kiến ​​thức chuyên môn cơ bản về thiết kế web.

Điều này cho phép bạn cá nhân hóa mọi khía cạnh của trang web và cải thiện khả năng đọc thông tin của bạn.

Thực hiện theo các quy trình trên và để lại bình luận nếu bạn có bất kỳ câu hỏi nào. Tôi hy vọng hướng dẫn này về cách thêm họ phông chữ trong CSS sẽ giúp ích cho bạn.


Xem thêm những thông tin liên quan đến chủ đề cách thêm nhiều họ phông chữ trong css

How to change Font-Size in CSS | Lesson 04 | CSS

  • Tác giả: MAS-CodeTech
  • Ngày đăng: 2021-06-14
  • Đánh giá: 4 ⭐ ( 1485 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: ★ Open Me Please ★

    In this video we will learn how to change font-size in css.

    👉Click Here to SUBSCRIBE
    https://bit.ly/2SGA7ah

    🚀Link for the Editor:
    https://code.visualstudio.com/

    🔗Website:
    mas-codetech.com

    👔Merch:
    https://teespring.com/stores/my-store-10289969

    ⏩Share this video with a friend

    ▶ Recommended Playlist:
    https://bit.ly/3dlqC9Z

    👉Follow Us on Instagram:
    https://www.instagram.com/mascodetech

    LearnFreeCoding MASCodeTech css html javascript webdesign programming coding webdeveloper webdevelopment php developer code programmer python java web website coder webdesigner ui design webdev software frontend ux computerscience bootstrap softwaredeveloper codinglife wordpress bhfyp

Phông Chữ trong CSS

  • Tác giả: www.codehub.com.vn
  • Đánh giá: 5 ⭐ ( 3240 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu về các thuộc tính liên quan đến phông trong CSS giúp thiết lập họ phông chữ (font-family), kích thước phông chữ (font-size), độ đậm của phông chữ (font-weight) và kiểu phông chữ (font-style) sử dụng trên tra…

Cách xác định phông chữ tùy chỉnh trong CSS với @ font-face và font-display

  • Tác giả: s10.galaxyz.net
  • Đánh giá: 4 ⭐ ( 9189 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: @font-face là một luật tại CSS được sử dụng để xác định phông chữ tùy chỉnh . Với @font-face , bạn cung cấp đường dẫn đến file phông chữ được lưu trữ trên cùng một server với file CSS của bạn. Luật này đã tồn tại khá lâu, nhưng có một thuộc tính mới hơn, font-display , mang đến một cấp độ tùy chọn tải mới.

Cách Thêm Google Font Cho Website

  • Tác giả: www.niemvuilaptrinh.com
  • Đánh giá: 5 ⭐ ( 9800 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Ngày hôm nay chúng ta sẽ cùng nhau đi vào tìm hiểu cách thêm Google font vào cho website nha.

Làm thế nào để thêm phông chữ vào trang web của bạn

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

Phông chữ trong CSS

  • Tác giả: hocjavascript.net
  • Đánh giá: 5 ⭐ ( 3114 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các thuộc tính của phông chữ trong CSS sẽ xác định phông chữ nào, nét chữ, kích cỡ, và kiểu chữ của văn bản. Đây chính là sự khác biệt giữa các phông

Bài 13: Phông chữ trong CSS (CSS Fonts)

  • Tác giả: timoday.edu.vn
  • Đánh giá: 3 ⭐ ( 2161 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tìm hiểu về phông chữ, cách đặt phông chữ, cỡ chữ … trong CSS

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  35 Ví dụ về lưới CSS - ví dụ về bố cục lưới css

By ads_php