中文字体陈列及使用指导

导言

Backroom主站中通过使用特殊英文字体来达成特殊叙事效果的文章数目繁多,BR中分成员们在翻译此类作品时总会遇到找不到与其相符合之中文字体的情况。除此之外,Backroom主站中还不乏将某种特殊字体与某位特殊人物绑定的现象,此类特殊人物的中文翻译文本当然也需要一个字体的统一。为解决如此困境,本站点现推出中文字体指导页面。

本页面有四个主要用途:本页面陈列站点成员能够在本站点使用的所有中文字体及相应的使用方法、本页面含有可以跳转到使用特殊字体进行叙事的设定中心页面的链接、本页面能够指导读者如何在wikidot中使用自己在互联网上下载的字体文件、本页面能够充当一个中分成员交流特殊字体在不同场景中如何使用的场所。

字体陈列章节

>wikidot字体使用方法

在wikidot中使用字体需要总共两个步骤。

首先获得存储此字体文件的url,如字体ZCOOL QingKe HuangYou 的url就是(https://fonts.googleapis.com/css2?family=Kalam:wght@300&display=swap)。再通过添加“import代码”的方式将如此url导入到页面中,即可完成第一步。

import代码如下

[[module css]]
@import url('你想使用的字体的url应该填入这里');
[[/module]]

为做例,我想使用字体ZCOOL QingKe HuangYou,那么我将添加如此代码
[[module css]]
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300&display=swap');
[[/module]]

第二步便是将这个已经被import进来的字体文件使用在某些特定的页面元素中,要如此做,首先获知此字体文件的“字体家族名称”,font-family,譬如字体ZCOOL QingKe HuangYou的字体家族名称便是'ZCOOL QingKe HuangYou'。再将如此名称运用到特定的页面元素上,即可修改此元素的字体。

代码案例如下:

[[span]]这是一个需要修改字体的元素[[/span]]

预览:这是一个需要修改字体的元素

修改字体家族名称后:

[[span style="font-family:'ZCOOL QingKe HuangYou'"]]这是一个需要修改字体的元素[[/span]]

预览:这是一个需要修改字体的元素

你可以在本页面所有陈列出的字体附近找到其相应的url和字体家族名称。

>谷歌中文字体

中文字体文件体积巨大,若要浏览谷歌中文字体请点击如下链接跳转至另一页面,浏览其页面预计需要花费约10mb的数据

谷歌中文字体一览


已受特殊使用的字体溯源之章节

某些设定和故事中的元素已和某种字体绑定,譬如天鹅座档案库的角色Blanche,或创造肢团这种怪物的角色Protastheia。本页面将收纳这些使用特殊字体进行叙事的作品链接,在链接另一头的页面便会显现关于这种绑定的信息,以供各位成员在未来的翻译或创作过程中检索合适自己的字体。

天鹅座档案馆

Entity 5

M.E.G.归档中心

更多链接将随着翻译作品与原创作品的增多持续更新在这里


如何在Wikidot中使用本地的中文字体文件

如果在搜索引擎中搜索“中文字体下载”,获得的结果可能都是供用户下载至本地的中文字体.ttf文件,本章节现提供一种能够将如此ttf文件使用在wikidot页面上的方法。

  • 第一步 准备字体文件

首先在中文字体网站上下载你想使用的字体文件,下载前请注意文件版权信息,如是否商用免费。为做例,本指南在网站字体天下中下载了字体问藏书房

  • 第二步 准备css文件

在你的电脑本地创造一个txt 文件,再将其后缀名改为css。创造结束后,打开此文件,将如下代码复制入其中。

@font-face{
font-family:'你想如何称呼这个字体';
src: url(data:application/font-ttf;charset=utf-8;base64,将你的Base64字符串替换入这里) format('truetype');
}

为什么要这样做?

font-face可以让用户自定义一个能够在html页面中使用的字体,通过修改font-family的值,用户可以自定义这个字体的称呼,通过修改src的值,用户可以自定义这个字体文件的来源在是什么。(在这个指南中,我使用了“将字体文件转换成base64字符串”的方法来定义src的值,这是我本人能找到的唯一可以在wikidot上使用本地字体的方法,若有其他更快捷的方法请一定在评论区和我分享)

为做例,这个将包含问藏书房字体信息的css文件会将font-family名称定义为WenZang,如下

@font-face{
font-family:'WenZang';
src: url(data:application/font-ttf;charset=utf-8;base64,将你的Base64字符串替换入这里) format('truetype');
}

  • 第三步 处理字体文件至Base64字符串
打开网站GitOfSpeed
H6kFET.png将你想使用的ttf文件上传入此网站的这个方框中。
H6kart.png

上传完成后复制方框内的所有字符,将它们粘贴到之前的css文件中正确的位置里。

@font-face{
font-family:'WengCang';
src: url(data:application/font-ttf;charset=utf-8;base64,将你的Base64字符串替换入这里) format('truetype');
}

按照上述描述,做例的css文件将会是这个模样:
H6k62j.png

保存这个css文件,将其上传至wikidot页面的附件中,复制这个附件的链接地址(右键后寻找选项“复制链接地址”)就可以获得这个css文件的url了。按字体陈列章节中的指导,运用这个url和刚刚由你自己定义的“font-family”名称即可使用其对应字体。

为做例子,如果我要在某页面中使用问藏字体,我会先在页首(或随便什么地方只要不是其他元素内就好)加入如下代码

[[module css]]
@import url(http://附件链接.css);
[[/module]]

再通过如下代码修改元素字体

[[span style="font-family:'WengCang'"]]此文本使用问藏书房字体[[/span]]

最后,要在此css文件里添加上此字体相关的版权信息,这个字体能否被用户使用?这个字体能否被上传至wikidot服务器?这个字体是否能在cc协议中使用?请不要盲目相信字体天下网站中字体下载界面的版权说辞,并寻找此字体版权持有者的网站获得其版权信息。另,上传字体文件至wikidot服务器将会使此字体被视作“能够在第三方被下载”。

在css文件中,使用/* */来书写注释,注释的内容不会影响到代码和编译器。

本指南仅指导读者如何制作一个能够被wikidot网站读取的css文件,并无法指导读者如何制作一个能够被wikidot合法使用的css文件,若读者有更多与版权相关的疑问,请移步世界知识产权中心和其他什么网站获得更多内容。(或者请个知识产权律师什么的,我现在手里有一个关于怪谈文学的论文的翻译,但是一直联系不到原作者获得授权所以苦恼啊苦恼发不出来)

结语


如果有成员想要使用其他的字体进行页面翻译或创作,便请使用如上指导自行制作并上传字体文件,请一定要在评论区贴上和字体绑定的叙事页面之链接供他人日后查询。希望这篇指导能够帮助到大家的互联网漫游之旅。

除非特别注明,本页内容采用以下授权方式: Creative Commons Attribution-ShareAlike 3.0 License