Tôi không sử dụng flash hoặc php - và tôi đã được yêu cầu thêm phông chữ tùy chỉnh vào bố cục HTML đơn giản. "KG June Bug"Làm cách nào để cài đặt phông chữ tùy chỉnh trên trang web HTML
Tôi đã tải xuống nội bộ - có mẹo CSS đơn giản để thực hiện việc này không?
Có, bạn có thể sử dụng tính năng CSS có tên @ font-face. Nó chỉ được chính thức chấp thuận 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 khảo nó như 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 ở cùng vị trí với tệp html.
Tôi đã tải về phông chữ từ website dafont.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 hoạt động:
Đây là một cú pháp tốt cho việc thêm các phông chữ để ứ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:
Cũng cufon sẽ làm việc nếu bạn don' Tôi muốn sử dụng phông chữ và tài liệu này có tài liệu tốt trên trang web:
Đối với các trình duyệt hỗ trợ tốt nhất có thể, mã CSS của bạn sẽ trông như thế này:
@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;
}
Mọi chi tiết, xem bài viết Using @font-face tại CSS-tricks.com.
Hãy thử
@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ày
có một cách đơn giản để làm điều này: trong file html add:
<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />
Note : bạn đặt tên tệp .ttf yo bạn có. sau đó chuyển đến tệp css của bạn và thêm:
h1 {
color: blue;
font-family: vermin vibes;
}
Lưu ý: bạn đặt họ phông chữ của phông chữ bạn có.
Lưu ý: không viết tên họ phông chữ làm tên font.ttf của bạn ví dụ: nếu tên font.ttf của bạn là: "vermin_vibes.ttf", họ phông chữ của bạn sẽ là: "font vermin vibes" font family doesn không chứa các ký tự đặc biệt là "-, _" ... v.v. nó chỉ có thể chứa dấu cách.
Bạn thực sự nên định nghĩa nó như là một 'font-face' trong CSS thay vì yêu cầu một tệp ttf. – Arcath
nó không phải là cần thiết để làm như vậy bạn chỉ có thể làm điều đó như thế này tôi luôn luôn làm điều đó theo hai cách và cả hai công trình –
Nếu bạn đang sử dụng một style sheet bên ngoài, các mã có thể 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 tin .css riêng biệt (ví dụ styles.css). Nếu tệp .css của bạn nằm ở vị trí tách biệt với mã trang, tệp phông chữ thực tế phải có cùng đường dẫn với tệp .css, KHÔNG phải tệp .html hoặc .php trên trang web. Sau đó, trang web cần một cái gì đó như:
<link rel="stylesheet" href="css/styles.css">
trong < đầu > phần của trang html của bạn. Trong ví dụ này, tệp phông phải được đặt trong thư mục css cùng với biểu định kiểu. Sau đó, chỉ cần thêm class = "junebug" vào 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 các css trong trang web thực sự, thêm thẻ phong cách người đứng đầu html như:
<style>
@font-face { font-family: Junebug; src: url('Junebug.ttf'); }
</style>
Và phong cách yếu tố thực tế hoặc có thể được bao gồm ở 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 phần tử tôi có nghĩa là <div>, <p>, <h1> hoặc bất kỳ phần 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.Của hai lựa chọn này, các thực hành tốt nhất sẽ như thế nào:
<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ối thiểu chấp nhận được 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 để sử dụng phong cách nội tuyến là thực hành tốt nhất dictates rằng phong cách 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 của việc sử dụng các bảng định kiểu bên ngoài. Tôi hi vọng cái này giúp được.
xin lỗi nếu đó là "bài tập về nhà" thì mã sẽ trông như thế nào nếu tôi sử dụng phông chữ JUNEBUG này cho văn bản thuần túy – adam
Tôi đã cập nhật câu trả lời. Đẹp tìm kiếm font chữ bằng cách này. –
Tôi không biết bạn có thể làm điều đó. Nó có hoạt động trên các trình duyệt khác không? –