如何将字体嵌入Tiddlywiki？

Question

如何将字体嵌入Tiddlywiki？

4

我正在尝试向TiddlyWiki中添加新的字体，并已尝试了几种方法。但似乎都不起作用，也许你可以帮忙吗？

我尝试了将Google字体链接嵌入到HTML CSS样式表中，但它无法读取该字体。然后我按照这种方法进行操作：https://tiddlywiki.narkive.com/bS0CgWKQ/tw-tw5-how-to-embed-a-font-using-font-face-and-data-url 但与帖子中添加FontAwesome不同，我使用了我想要添加的字体“Playfair Display”，该字体可以在此处找到：https://fonts.google.com/specimen/Playfair+Display?selection.family=Playfair+Display:400,400i,700,700i

h1.tc-site-title {
    font-size:22px;
    color:#626262;
    text-transform:uppercase;
    font-family: 'Playfair Display', Georgia, serif;
    letter-spacing:1px;
}

现在显示的字体是Georgia。我最初添加了以下内容：

<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400,400i,700,700i&display=swap" rel="stylesheet">

我尝试将样式表嵌入网页，但却没有效果。后来我转而使用了narkive上的另一种方法，该方法是使用一个庞大的CSS样式表：

@font-face {
    font-family: 'playfair_displayregular';
    src: url(data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAHlMABMAAAABUNgAAHjcAAE...

没有显示任何错误消息，但字体就是不会更改为我想要的那种。我可以更改为任何常见字体，只是似乎Tiddlywiki无法正确读取该字体。

- Kate

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MsAmeen · Accepted Answer

我已经尝试了一些谷歌字体，并且它对我有效。如果您想尝试，请将以下内容复制/粘贴到新的tiddler中，然后您就可以从那里开始。

<link href='https://fonts.googleapis.com/css?family=Playfair Display' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Sofia' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Alex Brush' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Akronim' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Annie Use Your Telescope' rel='stylesheet'>

<style>
.st2 {font-family: 'Playfair Display';font-size: 42px;}
.st3 {font-family: 'Sofia';font-size: 42px;}
.st4 {font-family: 'Alex Brush';font-size: 42px;}
.st5 {font-family: 'Akronim';font-size: 42px;}
.st6 {font-family: 'Annie Use Your Telescope';font-size: 42px;}
</style>

<h1 class="st2">'Playfair Display'  1234567890 ABC abc</h1>
<h1 class="st3">'Sofia'  1234567890 ABC abc</h1>
<h1 class="st4">'Alex Brush'  1234567890 ABC abc</h1>
<h1 class="st5">'Akronim'  1234567890 ABC abc</h1>
<h1 class="st6">Sofia  1234567890 ABC abc</h1>

这是我的Tiddler输出

希望这能帮助到您