发表新帖
发表新帖

Using custom fonts using CSS?

后端 未结
关注
8 631
余生分开走
余生分开走 2020-11-22 09:01

I\'ve seen some new websites that are using custom fonts on their sites (other than the regular Arial, Tahoma, etc.).

And they support a nice amount of browsers.

相关标签:
8条回答
  • 情深已故
    2020-11-22 09:34

    To make sure that your font is cross-browser compatible, make sure that you use this syntax:

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

    Taken from here.

    0 讨论(0)
  • 执笔经年
    2020-11-22 09:36

    Today there are four font container formats in use on the web: EOT, TTF, WOFF,andWOFF2.

    Unfortunately, despite the wide range of choices, there isn't a single universal format that works across all old and new browsers:

    • EOT is IE only,
    • TTF has partial IE support,
    • WOFF enjoys the widest support but is not available in some older browsers
    • WOFF 2.0 support is a work in progress for many browsers.

    If you want your web app to have the same font across all browsers then you might want to provide all 4 font type in 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;
  }
    0 讨论(0)
  • 一整个雨季
    2020-11-22 09:36

    there's also an interesting tool called CUFON. There's a demonstration of how to use it in this blog It's really simple and interesting. Also, it doesn't allow people to ctrl+c/ctrl+v the generated content.

    0 讨论(0)
  • 伪装坚强ぢ
    2020-11-22 09:36

    I am working on Win 8, use this code. It works for IE and FF, Opera, etc. What I understood are : woff font is light et common on Google fonts.

    Go here to convert your ttf font to woff before.

    @font-face
{
    font-family:'Open Sans';
    src:url('OpenSans-Regular.woff');
}
    0 讨论(0)
  • 梦毁少年i
    2020-11-22 09:42

    First of all, you can't prevent people from downloading fonts except if it is yours and that usually takes months. And it makes no sense to prevent people from using fonts. A lot of fonts that you see on websites can be found on free platforms like the one I mentioned below.

    But if you want to implement a font into your website read this: There is a pretty simple and free way to implement fonts into your website. I would recommend Google fonts because it is free and easy to use. For example, I'll use the Bangers font from Google.(https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers) This is how it would look like: HTML

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

    CSS

    body {
font-family: 'Bangers', cursive;
}
    0 讨论(0)
  • 伪装坚强ぢ
    2020-11-22 09:46

    If you dont find any fonts that you like from Google.com/webfonts or fontsquirrel.com you can always make your own web font with a font you made.

    here's a nice tutorial: Make your own font face web font kit

    Although im not sure about preventing someone from downloading your font.

    Hope this helps,

    0 讨论(0)
 看不清?
提交回复
热议问题