Yêu cầu thg 6 11, 2019 5:34 SA 3587 1 3
  • 3587 1 3
+1

Hỏi về cách sử dụng font `Noto Sans CJK JP` cho web

Chia sẻ
  • 3587 1 3

Chào các bạn, mình muốn sử dụng font , mình tải nó tại đây : https://www.google.com/get/noto/

Đây là cấu trúc thư mục của mình:

file.PNG

Còn đây là file style.css của mình ạ, mình import nó vào nhưng chạy lên thì không thấy nó nhận :

@import url("../fonts/NotoSansCJKjp-Regular.otf");

body {
  margin: 0;
  padding: 0;
  font-family: 'NotoSansCJKjp-Regular'
}

mình biết bên mình là công ty của Nhật nên chắc sẽ có nhiều bạn giỏi về vấn đề này nên mình lên đây thực sự mong nhận được sự giúp đỡ từ mọi người. Mình xin cám ơn !

Avatar Hoang vn @wiliamfeng
thg 6 11, 2019 5:46 SA

Mình upate thêm ảnh bên trên ạ

3 CÂU TRẢ LỜI


Đã trả lời thg 6 11, 2019 8:55 SA
Đã được chấp nhận
+3

Để dùng được font thì trước tiên bạn cần phải define @font-face trong CSS trước cơ 😛

Ví dụ như đây là một file CSS mà Google Font define sẵn cho mình dùng https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap bạn có thể tham khảo 😄

P/S: Font Noto Sans CJK JP khá là nặng, và việc dùng nó trên web có thể đem lại trải nghiệm không tốt, như tăng thời gian tải trang (^^;) Bạn có thể dùng bản web font Noto Sans JP, hình như cũng giống cái Noto Sans CJK JP thì phải 🤔, được Google cung cấp ở đây https://fonts.google.com/specimen/Noto+Sans+JP?selection.family=Noto+Sans+JP (mặc dù cái Noto Sans JP này vẫn rất nặng :v)

Google họ cũng define sẵn css rồi, mình chỉ cần import vào mà dùng thôi 😄

<link href="https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap" rel="stylesheet">
body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans JP', sans-serif;
}
Chia sẻ
Avatar Hoang vn @wiliamfeng
thg 6 11, 2019 2:29 CH

Em cám ơn anh ạ. Đúng là trước giờ e toàn dùng font kiểu ăn săn từ Google , vì khi dùng nó thằng Google - font này hướng dân mình cách import và sử dụng luôn. Bưa nay mới import theo cách thủ công thì mới biết có vụ @font-face, và tò mò vào xem đường dân của Google-font thì ms thấy nó đúng là phải viết vậy.

Nói thêm về font Noto Sans JP vs Noto Sans CJK JP Lúc đầu e cung sử dụng font Noto Sans JP từ Google y chang như ở trên anh viết nhưng gặp khách hàng khó tính nên họ không chịu. Vì thế mới dân đến tình cảnh này đây 😆

Đã trả lời thg 6 11, 2019 6:02 SA
+1

Dạo quanh google ta được như sau. https://stackoverflow.com/questions/3245141/using-otf-fonts-on-web-browsers Bạn có thể tham khảo.

Chia sẻ
Đã trả lời thg 6 11, 2019 7:34 SA
+1

bạn đọc về font-face bao giờ chưa thế mà import file font như vậy 😂 đâu phải import cái file đó vào rồi sẽ tự sinh ra 1 font-family tên trùng với tên file đâu, bạn đọc về cách tạo font-family trước đi nhé, @font-face trên w3school ấy

Chia sẻ
Avatar Hoang vn @wiliamfeng
thg 6 11, 2019 2:19 CH

tks bạn nhé

Viblo
Hãy đăng ký một tài khoản Viblo để nhận được nhiều bài viết thú vị hơn.
Đăng kí