如何在CSS中使用外部字体

ujv3wf0j 于 2023-06-07 发布在其他

关注(0)|答案(4)|浏览(172)

我下载了一个文件夹，里面装满了svg和otf文件。它们包含了我想在我的html文档中使用的字体。下面是文件夹的外观：

第一个问题：
我应该使用哪个文件？我知道“process.svg”和“process-yellow.svg”可能有不同的颜色，但是，当我们有一个“process-yellow.svg”和一个“process-yellow.otf”时，我应该使用哪一个？
第二个问题：
如何在HTML文档中使用字体？到目前为止，我已经尝试了这个：
在html16.html style-element中：

<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-element中：

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

css

来源：https://stackoverflow.com/questions/44281225/how-to-use-outside-fonts-in-css

4条答案

按热度按时间

dzhpxtsq1#

如果允许Web嵌入。您可以生成其他字体类型文件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 */
}

赞(0）回复(0）举报 2023-06-07

56lgkhnf2#

这个应该能用请检查以下语法。

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

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

赞(0）回复(0）举报 2023-06-07

sz81bmfz3#

试试这个-像这样导入，

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

然后用途：

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

赞(0）回复(0）举报 2023-06-07

5uzkadbs4#

对我来说，有效的方法如下：

<style>
    @font-face {
        font-family: 'Titilum';
        src: url('fonts/Titillium_Web/TitilliumWeb-Bold.ttf') format('truetype');
    }

    .pftop {
        font-family: Titilum;
        text-align: center;
    }
</style>

赞(0）回复(0）举报 2023-06-07

我来回答

如何在CSS中使用外部字体

4条答案

相关问题

热门标签

最新问答