如何在CSS中使用外部字體

我已經下載了一個完整的svg和otf文件的文件夾。它們包含我希望在我的html文檔中使用的字體。下面是該文件夾的樣子：如何在CSS中使用外部字體

第一個問題：

我應該使用哪個文件？我知道「process.svg」和「process-yellow.svg」可能有不同的顏色，但是，當我們有一個「process-yellow.svg」和一個「process-yellow.otf」時，我應該使用哪一個？

第二個問題：

如何在我的HTML文檔中使用字體？到目前爲止，我已經試過這樣：

在html16.html風格元素：

<style type="text/css"> 
     @font-face { 
      font-family:'Process'; 
      src: url('/fonts/process.svg#process') format('svg'); 
     } 

     p.text1 { 
      width: 140px; 
      border: 1px solid black; 
      word-break: keep-all; 
      font-family: 'Process'; 
     } 
</style>

在html16.html體元素：

<body> 
    <b>word-break:keep-all</b> 
    <p class="text1">Tutorials Point originated from the idea that there exists-a class of readers who respond better to online content and prefer to learn new skills at their own pace from the comforts of their drawing rooms.</p> 

</body>

但它不會做任何東西的字體。它看起來像沒有我改變字體的樣子。

編輯：這應該補充的是進口WOFF的字體對我的作品，像我一樣在這裏：

@font-face { 
    font-family:Process; 
    src: url(https://www.tutorialspoint.com/css/font/SansationLight.woff); 
}

來源

2017-05-31 Sahand

問題的第一部分，好像是在說你下載PNG格式十幾標誌和問你應該使用哪一個 - 我們怎麼可能知道？回顧一下您從中獲取的任何網站，並查看下載是否包含任何類型的文檔或信息。 –

做一個CTRL + F5來硬刷新你的瀏覽器。如果這不起作用，請檢查您的src網址（當您查看您的源代碼時，請檢查url指向正確的位置）。 –

沒有成功，斯坦利。網址正確。 – Sahand

如果允許網頁嵌入。您可以生成其他字體類型文件from here，它適用於舊版瀏覽器。

@font-face { 
    font-family: 'Process'; 
    src: url('/fonts/process.eot') format('embedded-opentype'); /* IE9 Compat Modes */ 
    src: url('/fonts/process.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ 
     url('/fonts/process.woff') format('woff'), /* Modern Browsers */ 
     url('/fonts/process.ttf') format('truetype'), /* Safari, Android, iOS */ 
     url('/fonts/process.svg#process') format('svg'); /* Legacy iOS */ 
}

來源

2017-05-31 09:57:41

對生成我自己的字體不感興趣。我想了解如何導入字體。 – Sahand

它不是發電機它是轉換器。您必須將當前的svg和otf字體文件轉換爲其他格式，例如eot，woff，ttf才能與其他瀏覽器一起使用。 –

乾杯，男人。有效！ – Sahand

這應該工作。請檢查下面的語法。

@font-face { 
    font-family: novalight; 
    src: url('/static/src/fonts/novalight.otf'); 
} 

.proximanovalight { 
    font-family : novalight, sans-serif; 
}

來源

2017-05-31 09:48:21 xxCodexx

使用您的語法，但使用我自己的文件和字體名稱。不起作用。 – Sahand

你可以粘貼你試過的代碼嗎？ – xxCodexx

試一試 - 導入像這樣，

@import url('https://fonts.googleapis.com/css?family=El+Messiri');

然後使用：

font-family: 'El Messiri', sans-serif;

來源

2017-05-31 10:12:36 Leah

如何在CSS中使用外部字體

回答

相關問題