Câu trả lời:
Có, bạn có thể sử dụng tính năng CSS có tên @ font-face. Nó chỉ được phê duyệt chính thức trong CSS3, nhưng đã được đề xuất và triển khai trong CSS2 và đã được hỗ trợ trong IE trong một thời gian khá dài.
Bạn khai báo nó trong CSS như thế này:
@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}Sau đó, bạn chỉ có thể tham chiếu nó như các phông chữ tiêu chuẩn khác:
h3 { font-family: Delicious, sans-serif; }Vì vậy, trong trường hợp này,
<html>
<head>
<style>
@font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); }
h1 {
font-family: JuneBug
}
</style>
</head>
<body>
<h1>Hey, June</h1>
</body>
</html>Và bạn chỉ cần đặt JUNEBUG.TFF vào cùng vị trí với tệp html.
Tôi đã tải xuống phông chữ từ trang web dafont.com :
urlcó liên quan đến vị trí tệp css của bạn .
Để hỗ trợ trình duyệt tốt nhất có thể, mã CSS của bạn sẽ giống như sau:
@font-face {
font-family: 'MyWebFont';
src: url('webfont.eot'); /* IE9 Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}
body {
font-family: 'MyWebFont', Fallback, sans-serif;
}Để biết thêm thông tin, hãy xem bài viết Sử dụng @ font-face tại CSS-tricks.com .
Bạn có thể sử dụng @ font-face trong hầu hết các trình duyệt hiện đại.
Dưới đây là một số bài viết về cách thức hoạt động của nó:
Đây là một cú pháp tốt để thêm phông chữ vào ứng dụng của bạn:
Dưới đây là một vài nơi để chuyển đổi phông chữ để sử dụng với @ font-face:
Ngoài ra cufon sẽ hoạt động nếu bạn không muốn sử dụng mặt chữ và nó có tài liệu tốt trên trang web:
Thử cái này
@font-face {
src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket {
font-family: Market Deco;
} <div class="FontMarket">KhonKaen Market</div>vilis.org
Nếu bạn đang sử dụng một biểu định kiểu bên ngoài, mã có thể trông giống như thế này:
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }Và nên được lưu trong một tệp .css riêng (ví dụ: style.css). Nếu tệp .css của bạn nằm ở một vị trí tách biệt với mã trang, tệp phông thực tế sẽ có cùng đường dẫn với tệp .css, KHÔNG phải là tệp trang web .html hoặc .php. Sau đó, trang web cần một cái gì đó như:
<link rel="stylesheet" href="css/styles.css">trong phần <head> của trang html của bạn. Trong ví dụ này, tệp phông chữ phải được đặt trong thư mục css cùng với biểu định kiểu. Sau này, chỉ cần thêm class = "junebug" bên trong bất kỳ thẻ nào trong html của bạn để sử dụng phông chữ Junebug trong phần tử đó.
Nếu bạn đang đặt css vào trang web thực tế, hãy thêm thẻ kiểu vào phần đầu của html như:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>Và kiểu phần tử thực tế có thể được bao gồm trong phần trên <style>và được gọi cho mỗi phần tử theo lớp hoặc id hoặc bạn chỉ có thể khai báo kiểu nội tuyến với phần tử. Theo yếu tố tôi có nghĩa là <div>, <p>, <h1> hoặc bất kỳ yếu tố nào khác trong html cần sử dụng phông chữ Junebug. Với cả hai tùy chọn này, tệp phông chữ (Junebug.ttf) phải được đặt trong cùng một đường dẫn với trang html. Trong hai lựa chọn này, cách thực hành tốt nhất sẽ như sau:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
.junebug { font-family: Junebug; font-size: 4.2em; }
</style>và
<h1 class="junebug">This is Junebug</h1>Và cách ít được chấp nhận nhất sẽ là:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>và
<h1 style="font-family: Junebug;">This is Junebug</h1>Lý do không tốt khi sử dụng các kiểu nội tuyến là cách tốt nhất để ra lệnh rằng các kiểu nên được giữ tất cả ở một nơi để chỉnh sửa là thực tế. Đây cũng là lý do chính mà tôi khuyên bạn nên sử dụng tùy chọn đầu tiên là sử dụng biểu định kiểu ngoài. Tôi hi vọng cái này giúp được.
có một cách đơn giản để làm điều này: trong tệp html thêm:
<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />Lưu ý: bạn đặt tên của tệp .ttf bạn có. sau đó đi đến tập tin css của bạn và thêm:
h1 {
color: blue;
font-family: vermin vibes;
}Lưu ý: bạn đặt tên họ của phông chữ bạn có.
Lưu ý: không viết tên họ phông chữ làm ví dụ tên font.ttf của bạn: nếu tên font.ttf của bạn là: "vermin_vibes.ttf" họ phông chữ của bạn sẽ là: họ phông chữ "vermin vibes" không chứa ký tự đặc biệt như "-, _" ... vv nó chỉ có thể chứa dấu cách.
font-faceCSS thay vì yêu cầu tệp ttf.