Hướng dẫn chèn font đẹp vào website, chèn font lạ vào web

Thứ năm - 25/08/2016 10:31
Như các bạn đã biết font chữ quyết địch rất nhiều trong việc thể hiện văn bản. Đặc biệt là trình bày cho người đọc.
Với thiết kế web website font chữ còn thể hiện sự tỉ mỉ, phong cách Desige của website.
Về cơ bản các website trên internet chỉ hỗ trợ một số font unicode nhất định như : Arial, Times New Roman, Verdana, Helvetica... và chúng ta chỉ có thể dùng font chữ tiếng việt cho một vài font này thôi.
Và bài viết này giúp bạn có thể chèn thêm nhiều loại font chữ rất đẹp cho website của bạn. Không giới hạn với các font unicode cơ bản nữa. Có font chữ đẹp thì thiết kế web cũng sẽ đẹp hơn nhiều phải không.
A/ Sử dụng font trên máy tính, font bất kỳ để làm font chữ cho website.
Mình chia sẻ bài viết giúp website của bạn có thể sử dụng font unicode tùy biến cho website rất dễ dàng. Bạn có thể sử dụng chính font trên máy tính của bạn để làm font cho website.
Đầu tiên bạn cần download font chữ unicode về máy qua đường link: download font đẹp unicode cho website
http://www.mediafire.com/download/36at2kc8v14xzt1/Font_UVN.zip

Sau khi tải về bạn giải nén bạn có thể chọn font chứ bạn thích và upload font chữ này lên website.
Ví dụ bạn upload font chữ lên thư mục fonts trên website của bạn có đường dẫn là :
http://Tên-miền.com/fonts

Ví dụ bạn sử dụng font chữ: UVNBenXuan_R
Bạn sẽ có đường dẫn link này là : http://Tên-miền.com/fonts/UVNBenXuan_R.TTF

Để sử dụng font chữ này làm font cho website đầu tiên phần bạn chèn đoạn code sau trong thẻ head.
<style type="text/css">
@font-face {
font-family:myfont;
src:url('http://Tên-miền.com/fonts/UVNBenXuan_R.TTF') format('truetype'),
url('http://Tên-miền.com/fonts/UVNBenXuan_R.TTF/UVNBenXuan_R.eot#iefix') format('embedded-opentype'),
url('http://Tên-miền.com/fonts/UVNBenXuan_R.TTF/UVNBenXuan_R.woff') format('woff');
font-weight:normal;
 font-style:normal;
}
</style>
Đoạn mã trên khai báo thêm một font chữ tên là : myfont cho 3 trình duyệt firefox, chrome và IE.

Và để sử dụng font trên trong bất cứ hiển thị của website bạn chỉ cần viết css như các font chữ khác chỉ khác là font bạn chèn này sẽ có tên là :myfont
VD :
.div
{
font-family:myfont;
}
Vậy là bạn đã có font chữ riêng của bạn cho website rồi.

B/ Ngoài cách tự chèn thêm font chữ riêng của mình bạn có thể sử dụng font chữ của google.
Đơn giản bằng cách bạn truy cập site : Google Fonts theo đường dẫn : https://www.google.com/fonts
Bạn click chọn một font bất kỳ bạn muốn chèn vào website.
Sau đó click vào biểu tượng Quick Use.
Tại đây bạn chèn link sử dụng đến font của Google.Link này bạn chèn trong thẻ header nhé.
<head>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
</head>
Và việc còn lại là chỉ sử dụng font này thôi.
.class
{
font-family: 'Open Sans', sans-serif;
}
 

Nguồn bài viết: Sưu tầm có chỉnh sửa

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết

  Ý kiến bạn đọc

Thống kê truy cập
  • Đang truy cập10
  • Hôm nay235
  • Tháng hiện tại4,931
  • Tổng lượt truy cập80,091
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây