01/10/2018, 15:54

Lỗi hiển thị trên web

Chào cả nhà, mình đang gặp lỗi với khi sử dụng font Roboto, nếu tiếng Anh thì không lỗi nhưng tiếng Việt thì chữ đậm nhạt không đều

Đây là đoạn head trong html:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Davitluit</title>
  <link rel="stylesheet" href="style.css">
</head>

Css dùng font:

@font-face {
  font-family: 'Roboto';
  src: url('Roboto-Light-webfont.woff') format('woff');
}

@font-face {
  font-family: 'Roboto Light Italic';
  src: url('Roboto-LightItalic-webfont.woff') format('woff');
}

@font-face {
  font-family: 'Roboto Bold';
  src: url('Roboto-Bold-webfont.woff') format('woff');
}

em {
  font-family: 'Roboto Light Italic', serif;
}

strong {
  font-family: 'Roboto Bold', serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

 body {
   font-family: 'Roboto', sans-serif;
  display: grid;
  grid-template-areas: "nav nav"
                    "content ads"
                    "footer footer";
  grid-template-columns: 1fr 300px;
  grid-template-rows: 70px 1fr 50px;
  grid-gap: .2em;
  color: #787878;
}

Bạn nào biết vấn đề này chỉ mình với.

Hà Hải Nam viết 18:05 ngày 01/10/2018

Bạn cho thử cái này vào HTML xem sao.

<link href="https://fonts.googleapis.com/css?family=Roboto&amp;subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet">
Davit lượt viết 18:09 ngày 01/10/2018

Thay vào thì được bạn à, tuy nhiên chữ nó lại đậm hơn.

Sao kiểu tải font về sẵn lại lỗi như trên nhỉ?

Hà Hải Nam viết 17:56 ngày 01/10/2018

Chắc bạn nhập đường dẫn chưa chuẩn thôi, mở tab Network trong Chrome DevTools ra xem có bị lỗi gì không?

Davit lượt viết 18:00 ngày 01/10/2018

Không có báo lỗi gì bạn à. Mới lại cấu trúc project của mình rất đơn giản nên đường dẫn mình nhập đã đúng rồi.

Có nguyên nhân gì khác không bạn nhỉ?

Hà Hải Nam viết 17:55 ngày 01/10/2018

Nén project vào gửi mình xem.

Davit lượt viết 18:04 ngày 01/10/2018

Gửi bằng cách nào bạn nhỉ?

Hà Hải Nam viết 18:01 ngày 01/10/2018

Up lên Fshare nghen.

Davit lượt viết 18:05 ngày 01/10/2018

mình gửi message rồi đấy bạn.

Davit lượt viết 18:10 ngày 01/10/2018

Xử lý được rồi bạn à,

fontsquirrel.com

Fonts that support the language ‘Vietnamese’ » Font Squirrel

Browse the Font Squirrel fonts tagged as Vietnamese.

Theo link này tải lại thằng Roboto phù hợp thì hết lỗi trên rồi.

Cám ơn bạn nhiều nhé.

Hà Hải Nam viết 17:57 ngày 01/10/2018

Vừa định up code.

Davit lượt viết 17:59 ngày 01/10/2018

Bạn cứ up xem nào, nhỡ đâu lại học được thêm 1 phương án khác nữa.

Tks bạn,

Hà Hải Nam viết 18:03 ngày 01/10/2018

Mình lại xóa rồi, chủ yếu là do bạn chọn font không hỗ trợ Tiếng Việt thôi. Mà để cho nhanh thì cứ gắn code của Google Fonts vào, không sợ thiếu sót mà lại ngắn gọn code, đến khi nào gần hoàn thành project rồi thì sửa cũng chưa muộn.

Bài liên quan
0