Hướng dẫn kiểu chữ trong html

Các font đóng vai trò rất quan trọng trong việc tạo ra một Website thân thiện với người sử dụng, giúp họ dễ theo dõi nội dung hơn. Bề mặt và màu font phụ thuộc hoàn toàn vào máy tính và trình duyệt được sử dụng để quan sát trang web nhưng bạn có thể sử dụng thẻ HTML để thêm kiểu, kích cỡ và màu cho văn bản trên web. Bạn cũng có thể sử dụng thẻ để thiết lập cùng một cỡ, bề mặt, và màu cho tất cả văn bản của bạn.

Thẻ font có 3 thuộc tính là size, color, face để xác định font. Để thay đổi bất kỳ thuộc tính font nào tại bất kỳ thời gian nào trong trang web của bạn, bạn sử dụng thẻ . Văn bản sẽ giữ nguyên cho đến khi bạn đóng thẻ với . Với thẻ , bạn có thể thay đổi một hoặc tất cả thuộc tính của nó.

Ghi chú: Hai thẻ font và basefont là thẻ cũ và chúng đang được cho rằng sẽ bị thay đổi trong các phiên bản mới của HTML. Vì thế bạn không nên sử dụng chúng nhiều, chúng tôi đề nghị bạn nên sử dụng các kiểu CSS để xác định font cho mình. Nhưng vì mục đích học tập, chương này chúng tôi vẫn giải thích chi tiết các thẻ này.

Thiết lập kích cỡ Font trong HTML

Bạn sử dụng thuộc tính size để thiết lập kích cỡ cho nội dung. Dãy giá trị được chấp nhận là từ 1 [nhỏ nhất] đến 7 [lớn nhất]. Cỡ mặc định cho font là 3.

Ví dụ:

    
        Thiet lap kich co font trong HTML
    
    
        Font size="1"

        Font size="2"

        Font size="3"

        Font size="4"

        Font size="5"

        Font size="6"

        Font size="7"
    

Nó sẽ cho kết quả sau:

Xác định kích cỡ font dựa vào kích cỡ Font hiện tại

Bạn có thể xác định cỡ lớn hơn hay nhỏ hơn bao nhiêu so với cỡ hiện tại. Bạn sử dụng hoặc

Ví dụ

    
        Xac dinh kich co font trong HTML
    
    
        Font size="-1"

        Font size="+1"

        Font size="+2"

        Font size="+3"

        Font size="+4"
    

Đoạn code trên sẽ cho kết quả là:

Thiết lập bề mặt Font trong HTML - Font Face trong HTML

Bạn có thể thiết lập bề mặt font bằng cách sử dụng thuộc tính face nhưng bạn cần phải biết rằng nếu người sử dụng trang mà chưa chạy cài đặt font, họ sẽ không thể nhìn thấy nó. Và người dùng sẽ chỉ nhìn thấy bề mặt font mặc định áp dụng cho máy của họ.

Ví dụ

    
        Font Face trong HTML
    
    
        Times New Roman

        Verdana

        Comic Sans MS

        WildWest

        Bedrock

    

Nó sẽ cho kết quả sau:

Thiết lập danh sách Font Face trong HTML

Một người dùng sẽ chỉ có thể nhìn thấy font của bạn nếu họ đã cài đặt font đó trong máy. Vì thế, bạn có thể xác định các bề mặt font xen kẽ nhau bằng cách liệt kê các tên bề mặt font, phân biệt bằng dấu phảy.

Khi trang web của bạn được tải, trình duyệt của khách sử dụng sẽ hiện thị bề mặt font đầu tiên. Nếu không có font nào được cài đặt, nó sẽ hiển thị bề mặt font mặc định là Times New Roman.

Ghi chú: Kiểm tra danh sách đầy đủ của Một số Standard Font trong HTML.

Thiết lập màu Font trong HTML

Bạn có thể thiết lập màu cho font bằng cách sử dụng thuộc tính color. Bạn có thể xác định màu mà bạn muốn bằng cách sử dụng tên màu hoặc mã thập lục phân của màu.

Ghi chú: Kiểm tra danh sách đầy đủ của Màu và mã màu trong HTML.

Ví dụ

    
        Thiet lap mau font trong HTML
    
    
        Phan van ban nay co mau hong.

        Phan van ban nay co mau do.
    

Nó sẽ cho kết quả sau:

Phần tử trong HTML

Phần tử này được sử dụng để thiết lập một kích cỡ, màu, và bề mặt font mặc định cho bất kỳ phần nào trong tài liệu. Tuy nhiên, phần tử có quyền ưu tiên cao hơn và sẽ ghi đè các thiết lập trong .

Thẻ cũng nhận các thuộc tính là màu, kích cỡ và bề mặt và phần tử này cũng sẽ hỗ trợ cách xác định kích cỡ fotn dựa vào kích cỡ font hiện tại [bằng cách đưa vào giá trị +1 cho cỡ lớn hơn hoặc -2 cho cỡ nhỏ hơn].

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.

• Video – Cách sử dụng font trong html và css
• Hướng dẫn chi tiết
  • Cách 1: Tải và dùng trực tiếp font
    • Giao diện HTML
  • Định dạng CSS
  • Cách 2: Dùng Google font
• Các thuộc tính đã hướng dẫn

Video – Cách sử dụng font trong html và css

Hướng dẫn chi tiết

"Ra đời, cuộc sống bươm chải, có làm vẫn không có ăn" nên phải gắn QUẢNG CÁO

Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn

Cách 1: Tải và dùng trực tiếp font

+ Tải font từ trên mạng về [các bạn nên chú ý vấn đề bản quyền].

+ Lưu vào thư mục chứa mã nguồn html và css. Dùng đường dẫn gián tiếp như đã hướng dẫn ở các bài trước.

+ Trong file css

Có làm thì mới có ăn như ai đó từng nói - Vài dòng ngắn cho QUẢNG CÁO nhé

Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký và sử dụng hosting từ link trên, Góc Làm Web sẽ có một ít tiền để duy trì. 

Dùng @font-face trong file css để định nghĩa font:

+ src:url[đường dẫn đến file font]. Đường dẫn bao gồm luôn cả phần đuôi file.

+ thuộc tính font-family trong trường hợp này có tác dụng đặc tên cho font mà chúng ta muốn dùng.

Để áp dụng font đã định nghĩa, ta dùng thuộc tính font-famaly theo tên mà chúng ta đặt trong font-face.

Giao diện HTML

Định dạng CSS

Cách 2: Dùng Google font

Hướng dẫn tóm tắt, phần chi tiết sẽ trình bày trong video bên trên.

+ Vào google search, tìm kiếm từ khóa “Google font” hoặc vào đường dẫn //fonts.google.com

+ Chọn font muốn sử dụng. Mở hộp thao5i nhỏ dưới màn hình Family selected.

Trong tab customize, chọn các định dạng sẽ được hỗ như như bold [in đậm], italic [in nghiêng], light [nét mảnh] …

Lưu ý: càng có nhiều định dạng hỗ trợ càng load lâu hơn.

Trong tab Embed, copy đoạn ….  và dán vào thẻ head trong file html.

Để áp dụng font, các bạn dùng thuộc tính font-family theo hướng dẫn của Google.

Các thuộc tính đã hướng dẫn

+ float: left [right] dồn các khối

+ overflow: hidden

+ display: block

+ margin và padding

+ border : viền, 1px [độ dày] black [màu] solid [loại nét]

+ text-align : canh lề

+ font-size : kích thước.

+ font-weight : bold độ đậm nhạt, giống như thẻ

+ font-family : kiểu chữ

+ font-style: italic : tạo chữ in nghiêng

+ float : left, dồn sang một bên

+ text-decoration: none, underline.

+ line-height: 20px: độ giãn dòng.

+ color: [màu chữ] dùng green, red hay mã màu

+ background-color: [màu nền]black

+ background-image: url[imgage source].

Code mẫu: download

Nếu có thắc mắc, đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.