Google Fonts là một dịch vụ phông chữ web miễn phí. Trong đoạn mã này, bạn có thể tìm thấy cách nhập Phông chữ Google trong tệp CSS bằng cách sử dụng quy tắc @import hoặc thẻ .

Bạn đang xem : cách nhập phông chữ của google vào css

Một phần thiết yếu của bất kỳ thiết kế nào là phông chữ được chọn. Google Fonts là một dịch vụ miễn phí về phông chữ trên web cho phép chúng tôi sử dụng nhiều loại phông chữ khác nhau trong tệp CSS của mình.

Trong đoạn mã này, bạn sẽ tìm thấy hai cách nhập Google Fonts. Bạn có thể sử dụng quy tắc CSS @import hoặc thẻ HTML & lt; link & gt; . Nó khá dễ thực hiện, nhưng trước tiên, chúng tôi sẽ giải thích cách nhập phông chữ bạn muốn. Google Fonts có thể tạo mã tự động dựa trên phông chữ mà bạn muốn thêm vào trang web của mình. Mở Google Fonts và làm theo các bước sau:

  1. Tìm phông chữ và nhấp vào nó (thẻ có phông chữ), sau đó nhấp vào “+ Chọn kiểu này”. Ở bên phải, bạn sẽ thấy một vùng chứa có tên “Gia đình đã chọn”.
  2. Nhấp vào “Nhúng” và chọn & lt; liên kết & gt; hoặc @import tùy thuộc vào vị trí bạn cần thêm phông chữ (trong HTML hoặc CSS ).
  3. Sao chép / dán các mã bạn cần.

Đầu tiên, chúng tôi sẽ trình bày một ví dụ với quy tắc @import.

Tạo HTML

  • Sử dụng & lt; h1 & gt; làm thẻ tiêu đề và viết nội dung trong thẻ & lt; p & gt; .
  

& lt;

h1

& gt;

Lorem Ipsum

& lt; /

h1

& gt;

& lt;

p

& gt;

Lorem Ipsum chỉ đơn giản là văn bản giả của ngành in ấn và sắp chữ. Lorem Ipsum đã trở thành văn bản giả tiêu chuẩn của ngành kể từ những năm 1500, khi một nhà in không xác định lấy một dãy loại và xáo trộn nó để tạo thành một cuốn sách mẫu.

& lt;

p

& gt;

Thêm CSS

  • Nhập Phông chữ “Muli” và “Cát lún” của Google cho & lt; body & gt; và & lt; h1 & gt ;, tương ứng.
  • Chỉ định font-family cho từng phần tử (& lt; body & gt; và & lt; h1 & gt;).
  • Tạo kiểu riêng cho hai phần tử bằng cách sử dụng các thuộc tính sau: color , font-weight , font-style , font-size , line-height , letter-spacing và các thuộc tính khác.
  

@ import

url (

'https://fonts.googleapis.com/css?family=Muli&display=swap'

);

@ import

url (

'https://fonts.googleapis.com/css?family=Quicksand&display=swap' < / p>);

body

{

font-family

:

'Muli'

, sans-serif;

color

:

rgba

(

0

,

0

,

0

,

0.8

);

font-weight

:

400

;

line-height

:

1.58

;

letter-spacing

: -.

003em

;

font-size

:

20px

;

padding

:

70px

; }

h1

{

font-family

:

'Quicksand'

, sans-serif;

font-weight

:

700

;

font-style

: normal;

font-size

:

38px

;

line-height

:

1.15

;

letter-spacing

: -.

02em

;

color

:

rgba

(

0

,

0

,

0

,

0.8

); -webkit-

font-smoothing

: antialiased; }

Bây giờ, bạn có thể thấy mã cuối cùng.

Ví dụ về cách nhập hai Phông chữ Google với quy tắc @import: < / h3>

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

@ import

url (

'https://fonts.googleapis.com/css?family=Muli&display=swap' < / p>);

@ import

url (

'https://fonts.googleapis.com/css?family=Quicksand&display=swap' < / p>);

body

{

font-family

:

'Muli'

, sans-serif;

color

:

rgba

(

0

,

0

,

0

,

0.8

);

font-weight

:

400

;

line-height

:

1.58

;

letter-spacing

: -.

003em

;

font-size

:

20px

;

padding

:

70px

; }

h1

{

font-family

:

'Quicksand'

, sans-serif;

font-weight

:

700

;

font-style

: normal;

font-size

:

38px

;

line-height

:

1.15

;

letter-spacing

: -.

02em

;

color

:

rgba

(

0

,

0

,

0

,

0.8

); -webkit-

font-smoothing

: antialiased; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h1

& gt;

Lorem Ipsum

& lt; /

h1

& gt;

& lt;

p

& gt;

Lorem Ipsum chỉ đơn giản là văn bản giả của ngành in ấn và sắp chữ. Lorem Ipsum đã trở thành văn bản giả tiêu chuẩn của ngành kể từ những năm 1500, khi một nhà in không xác định lấy một dãy loại và xáo trộn nó để tạo thành một cuốn sách mẫu.

& lt; /

p

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Trong ví dụ trên, chúng tôi chỉ nhập hai Phông chữ Google. Chúng phải luôn là dòng đầu tiên trong tệp CSS. Bạn không nên nhập quá nhiều phông chữ để mang lại tốc độ tải tốt hơn.

Hãy xem một ví dụ khác dễ hiểu hơn trong đó chúng tôi chỉ nhập một phông chữ.

Ví dụ về cách nhập Phông chữ Google với quy tắc @import: < / h3>

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

style

& gt;

@ import

url (

'https://fonts.googleapis.com/css2?family=Lora&display=swap' < / p>);

h1

{

font-family

:

'Lora'

, serif;

color

:

# 000000

;

text-align

: center; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h1

& gt;

Lorem Ipsum

& lt; /

h1

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »

Cũng có thể nhập Phông chữ Google bằng cách sử dụng liên kết HTML & lt; & gt; nhãn. Bạn phải thêm nó vào tiêu đề.

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

title

& gt;

Tiêu đề của tài liệu

& lt; /

title

& gt;

& lt;

liên kết

href

=

" https://fonts.googleapis.com/css?family=Dosis&display=swap "

rel

=

" bảng định kiểu "

& gt;

& lt;

style

& gt;

h1

{

font-family

:

'Dosis'

, sans-serif;

color

:

# 777777

;

text-align

: center; }

& lt; /

style

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

h1

& gt;

Lorem Ipsum

& lt; /

h1

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;


Hãy tự mình thử »


Xem thêm những thông tin liên quan đến chủ đề cách nhập phông chữ google vào css

How To Use Google Fonts In CSS | How To Use Multiple Google Fonts In CSS | Part – 73 [Web Ground]

  • Tác giả: Web Ground
  • Ngày đăng: 2021-04-17
  • Đánh giá: 4 ⭐ ( 8776 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Today I will teach you how to use google fonts in css. how to use google font in css is most searchable nowadays. People searches how to add google fonts in css or how to import google font in css they can see this how to import google font in html. Where I have covered add google font to html,how to add multiple google fonts in html. Here I Will teach use google fonts in html.

    At web ground, I am here to help you with each and every concept on add google fonts in html. add google fonts to html can be a good practice to hands-on with. Many people searches google fonts css so here we go. Some people think that learn google fonts is too tricky but my friend you are wrong because google fonts used in website and how to add google font in html and how to use google font in website are too easy you can imagine.

    In this video you will know about google fonts tutorial for beginners. So if you have any doubt on css google fonts or if you say how to add google fonts to css or how to add google fonts to css file so I recommend you to see the video. In import google fonts into css and adding google fonts to css will learn most of the concept on web design bangla tutorial and web design bangla tutorial to your website html syntax step by step.

    Also if you search for how to insert google fonts into css,how to link google fonts in css then yes this video is for you

    Our Web Design And Development Full Course
    ==========================================
    https://www.youtube.com/watch?v=JKWy62P0q8s&list=PLHquSSTADIunFowM99XPe-B-0e0yZ0wAb

    Previous Part
    =============
    https://youtu.be/ZkliX1wtsYQ

    If You Want To Connect With Me
    ==============================
    👉 Our Facebook Page – https://www.facebook.com/WebGroundTutorial/
    👉 Our Facebook Group – https://www.facebook.com/groups/webgrounder/

    googlefontsbangla bangla_google_font google_font_html_css

Hướng Dẫn Cách Sử Dụng Easy Google Fonts

  • Tác giả: jdomain.vn
  • Đánh giá: 5 ⭐ ( 2960 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Một trong những hạn chế khi làm việc với web wordpress là số lượng phông chữ mà bạn có thể sử dụng với trang web của mình, Điều này có thể được giải quyết bằng một đoạn code CSS, nhưng làm thế nào để bạn giải quyết nhanh chóng trên một trang web WordPress? May mắn thay, một trong những cách dễ nhất để giải quyết vấn đề này là sử dụng plugin Easy Google Fonts

Phông Chữ trong CSS

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

Tùy chỉnh thẻ CSS cho bố cục

  • Tác giả: support.google.com
  • Đánh giá: 4 ⭐ ( 2205 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Để sử dụng trình thiết kế mẫu với CSS của mẫu blog, có một vài nguyên tắc cần tuân thủ.
    Thiết lập các biến
    Trong phần của mã, bạn cần có

Bài 10: Cách sử dụng font trong html và css

  • Tác giả: goclamweb.com
  • Đánh giá: 3 ⭐ ( 8414 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài này chúng ta sẽ tìm hiểu cách sử dụng font trong html và css. Có hai dùng font là tải về, dủng trực tiếp trong mã nguồn. Cách thứ hai là dùng google font.

Làm cách nào để nhập Phông chữ Google Web trong tệp CSS?

  • Tác giả: helpex.vn
  • Đánh giá: 4 ⭐ ( 8300 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tôi đang làm việc với CMS mà tôi chỉ có quyền truy cập vào tệp CSS. Vì vậy, tôi không thể đưa bất kỳ thứ gì vào HEAD của tài liệu. Tôi tự hỏi liệu có cách nào để nhập phông chữ web từ trong…

Làm thế nào để sử dụng font chữ của Google cho website

  • Tác giả: www.daipho.com
  • Đánh giá: 5 ⭐ ( 8060 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Google Fonts có nhiều font chữ đẹp và bắt mắt với hàng trăm font. Bài viết này hướng dẫn cách sử dụng Google Font cho website của bạn theo chuẩn code 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  ArrayList trong Java - mảng danh sách java

By ads_php