Hỏi về cách sử dụng font `Noto Sans CJK JP` cho web
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:
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 !
3 CÂU TRẢ LỜI
Để 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;
}
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
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.
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
tks bạn nhé
Mình upate thêm ảnh bên trên ạ