Sử dụng phông chữ tùy chỉnh bằng CSS?

Tôi đã thấy một số trang web mới đang sử dụng phông chữ tùy chỉnh trên trang web của họ (trừ Arial, Tahoma thông thường, v.v.).

Và họ hỗ trợ một lượng lớn trình duyệt.

Làm thế nào để làm điều đó? Trong khi cũng ngăn mọi người truy cập miễn phí để tải xuống phông chữ, nếu có thể.

Nhìn chung, bạn có thể sử dụng phông chữ tùy chỉnh bằng @font-faceCSS của mình. Đây là một ví dụ rất cơ bản:

@font-face {
    font-family: 'YourFontName'; /*a name to be used later*/
    src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
}

Sau đó, tầm thường, để sử dụng phông chữ trên một yếu tố cụ thể:

.classname {
    font-family: 'YourFontName';
}

( .classnamelà bộ chọn của bạn).

Lưu ý rằng các định dạng phông chữ nhất định không hoạt động trên tất cả các trình duyệt; bạn có thể sử dụng trình tạo của Fontquirrel.com để tránh quá nhiều nỗ lực chuyển đổi.

Bạn có thể tìm thấy một bộ phông chữ web miễn phí đẹp do Google Fonts cung cấp (cũng có các @font-facequy tắc CSS được tạo tự động , do đó bạn không phải tự viết).

đồng thời ngăn mọi người truy cập miễn phí để tải xuống phông chữ, nếu có thể

Không, không thể định kiểu văn bản của bạn bằng phông chữ tùy chỉnh được nhúng qua CSS, trong khi ngăn mọi người tải xuống. Bạn cần sử dụng hình ảnh, Flash hoặc Canvas HTML5 , tất cả đều không thực tế.

Tôi hy vọng điều đó đã giúp!

Để đảm bảo rằng phông chữ của bạn tương thích với nhiều trình duyệt, hãy đảm bảo rằng bạn sử dụng cú pháp này:

@font-face {
    font-family: 'Comfortaa Regular';
    src: url('Comfortaa.eot');
    src: local('Comfortaa Regular'), 
         local('Comfortaa'), 
         url('Comfortaa.ttf') format('truetype'),
         url('Comfortaa.svg#font') format('svg'); 
}

Lấy từ đây .

Bạn phải tải xuống tệp phông chữ và tải nó trong CSS của bạn.

Fe Tôi đang sử dụng phông chữ Yanone Kaffeesatz trong Ứng dụng web của mình.

Tôi tải và sử dụng nó thông qua

@font-face {
    font-family: "Yanone Kaffeesatz";
    src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}

trong bản định kiểu của tôi.

Ngày nay có bốn định dạng chứa phông chữ được sử dụng trên web: EOT, TTF, WOFF,vàWOFF2.

Thật không may, mặc dù có nhiều lựa chọn, nhưng không có một định dạng phổ quát nào hoạt động trên tất cả các trình duyệt cũ và mới:

• EOT chỉ là IE,
• TTF có hỗ trợ một phần IE,
• WOFF thích sự hỗ trợ rộng nhất nhưng không có sẵn trong một số trình duyệt cũ hơn
• Hỗ trợ WOFF 2.0 là một công việc đang tiến triển đối với nhiều trình duyệt.

Nếu bạn muốn ứng dụng web của mình có cùng một phông chữ trên tất cả các trình duyệt thì bạn có thể muốn cung cấp tất cả 4 loại phông chữ trong CSS

 @font-face {
      font-family: 'besom'; !important
      src: url('fonts/besom/besom.eot');
      src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
           url('fonts/besom/besom.woff2') format('woff2'),
           url('fonts/besom/besom.woff') format('woff'),
           url('fonts/besom/besom.ttf') format('truetype'),
           url('fonts/besom/besom.svg#besom_2regular') format('svg');
      font-weight: normal;
      font-style: normal;
  }

Nếu bạn không tìm thấy bất kỳ phông chữ nào bạn thích từ Google.com/webfonts hoặc Fontquirrel.com, bạn luôn có thể tạo phông chữ web của riêng mình bằng một phông chữ bạn đã tạo.

Đây là một hướng dẫn tốt đẹp: Tạo bộ phông chữ web của riêng bạn

Mặc dù tôi không chắc chắn về việc ngăn ai đó tải xuống phông chữ của bạn.

Hi vọng điêu nay co ich,

Ngoài ra còn có một công cụ thú vị gọi là CUFON . Có một minh họa về cách sử dụng nó trong blog này Thật đơn giản và thú vị. Ngoài ra, nó không cho phép mọi người ctrl + c / ctrl + v nội dung được tạo.

Tôi đang làm việc trên Win 8, sử dụng mã này. Nó hoạt động cho IE và FF, Opera, v.v. Điều tôi hiểu là: phông chữ woff là ánh sáng và phổ biến trên phông chữ Google.

Tới đây để chuyển đổi phông chữ ttf của bạn thành woff trước.

@font-face
{
    font-family:'Open Sans';
    src:url('OpenSans-Regular.woff');
}

Trước hết, bạn không thể ngăn mọi người tải xuống phông chữ trừ khi đó là của bạn và thường mất vài tháng. Và nó không có ý nghĩa để ngăn chặn mọi người sử dụng phông chữ. Rất nhiều phông chữ mà bạn thấy trên các trang web có thể được tìm thấy trên các nền tảng miễn phí như cái tôi đã đề cập dưới đây.

Nhưng nếu bạn muốn triển khai một phông chữ vào trang web của mình thì hãy đọc điều này: Có một cách khá đơn giản và miễn phí để triển khai phông chữ vào trang web của bạn. Tôi muốn giới thiệu phông chữ của Google vì nó miễn phí và dễ sử dụng. Ví dụ, tôi sẽ sử dụng phông chữ Bangers từ Google (. Https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers ) Đây là cách nó sẽ trông giống như: HTML

<head>
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>

CSS

body {
font-family: 'Bangers', cursive;
}