CSS kullanarak özel fontlar mı kullanıyorsunuz?

Kendi sitelerinde özel fontlar kullanan bazı yeni web siteleri gördüm (normal Arial, Tahoma, vs. dışında).

Ve çok sayıda tarayıcıyı destekliyorlar.

biri bunu nasıl yapar? Ayrıca, mümkünse insanların yazı tipini indirmek için ücretsiz erişime sahip olmalarını engeller.

Genel olarak, @font-faceCSS'nizde kullanarak özel bir yazı tipi kullanabilirsiniz . İşte çok temel bir örnek:

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

Ardından, önemsiz olarak, yazı tipini belirli bir öğede kullanmak için:

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

( .classnameseçicinizdir).

Belirli yazı tipi biçimlerinin tüm tarayıcılarda çalışmadığını unutmayın; çok fazla çaba harcamaktan kaçınmak için fontsquirrel.com'un jeneratörünü kullanabilirsiniz.

Google Yazı Tipleri tarafından sağlanan güzel bir dizi ücretsiz web yazı tipi bulabilirsiniz (ayrıca otomatik olarak oluşturulan CSS @font-facekurallarına sahiptir, bu yüzden kendiniz yazmak zorunda kalmazsınız).

ayrıca insanların mümkünse yazı tipini indirmek için serbest erişime sahip olmalarını önler

Hayır, metninizi CSS yoluyla gömülü özel bir yazı tipiyle biçimlendirmek mümkün değildir, aynı zamanda insanların indirmesini önleyemezsiniz. Hepsi çok pratik olmayan resimler, Flash veya HTML5 Canvas kullanmanız gerekir .

Umarım yardımcı olmuştur!

Yazı tipinizin tarayıcılar arası uyumlu olduğundan emin olmak için bu sözdizimini kullandığınızdan emin olun:

@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'); 
}

Buradan alındı .

Yazı tipi dosyasını indirip CSS'nize yüklemelisiniz.

Fe Web Uygulamamda Yanone Kaffeesatz yazı tipini kullanıyorum .

Yükler ve kullanırım

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

stil sayfamda.

Bugün web'de kullanılan dört yazı tipi kapsayıcı biçimi vardır: EOT, TTF, WOFF,veWOFF2.

Ne yazık ki, çok çeşitli seçeneklere rağmen, tüm eski ve yeni tarayıcılarda çalışan tek bir evrensel format yoktur:

• EOT yalnızca IE'dir ,
• TTF'nin kısmi IE desteği var,
• WOFF en geniş desteğe sahiptir, ancak bazı eski tarayıcılarda mevcut değildir
• WOFF 2.0 desteği birçok tarayıcı için devam eden bir çalışmadır.

Web uygulamanızın tüm tarayıcılarda aynı yazı tipine sahip olmasını istiyorsanız, CSS'de 4 yazı tipinin tümünü sağlamak isteyebilirsiniz

 @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;
  }

Google.com/webfonts veya fontsquirrel.com adresinden istediğiniz yazı tiplerini bulamazsanız, her zaman yaptığınız yazı tipiyle kendi web yazı tipinizi oluşturabilirsiniz.

İşte güzel bir öğretici: Kendi yazı tipi yüz web yazı tipi kiti olun

Her ne kadar im birisi yazı tipini indirmesini önlemek konusunda emin değilim.

Bu yardımcı olur umarım,

CUFON adında ilginç bir araç da var . Bu blogda nasıl kullanılacağına dair bir gösteri var Gerçekten basit ve ilginç. Ayrıca, insanların oluşturulan içeriği ctrl + c / ctrl + v'ye izin vermez.

Win 8 üzerinde çalışıyorum, bu kodu kullanın. IE ve FF, Opera, vb için çalışır. Anladığım şey: woff yazı tipi Google yazı tiplerinde hafif ve yaygındır.

Daha önce ttf yazı tipinizi woff'a dönüştürmek için buraya gidin .

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

Her şeyden önce, sizin olan ve genellikle aylar süren durumlar dışında kullanıcıların yazı tiplerini indirmesini engelleyemezsiniz. İnsanların yazı tiplerini kullanmasını engellemek hiç mantıklı değil. Web sitelerinde gördüğünüz birçok yazı tipi, aşağıda bahsettiğim gibi ücretsiz platformlarda bulunabilir.

Ancak web sitenize bir yazı tipi uygulamak istiyorsanız bunu okuyun: Web sitenize yazı tipleri uygulamak için oldukça basit ve ücretsiz bir yolu var. Google yazı tiplerini öneriyorum çünkü ücretsiz ve kullanımı kolay. Örneğin, Google'dan Bangers yazı tipini kullanacağım. ( Https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers ) Şöyle görünür: HTML

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

CSS

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