测试fonts

Fonts测试

这一章是测试一下字体. 拖了一个暑假了, 也该搞一下了qwq.

我是楷体字;

这个的实现方式很简单:

1
<font face="楷体"> 我是楷体字</font>;

但我们当然不局限于这么简单的东西, 比如:

This text will be displayed using the Romoish font.

How is this achieved? First, there is a Romoish.ttf file located in my /static/fonts directory.

We want to use CSS to handle this, so we add the following in the custom.css file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
/* 在 assets/css/custom.css 或类似文件中 */
/* 定义 Romoish 字体 */
@font-face {
  font-family: 'Romoish';
  src: url('/fonts/Romoish.ttf') format('truetype'); /* 注意路径以斜杠开头 */
  font-weight: normal;
  font-style: normal;
  font-display: swap; /* 可选,确保文本在字体加载期间可见 */
}

/* 应用 Romoish 字体 */
.Romoish {
  font-family: 'Romoish', serif; /* 使用定义的字体系列 */
  /* 你可以在这里添加其他样式,例如 */
  font-size: 3rem; 
  line-height: 1;
  /* color: #333; */
}

Then, using

1
2
3
4
5
<p class="Romoish">This text will be displayed using the Romoish font.</p>

<p class="Romoish">How is this achieved? First, there is a Romoish.ttf file located in my /static/fonts directory.</p>

<p class="Romoish">We want to use CSS to handle this, so we add the following in the custom.css file.</p>

finishes our works

By the way, this font is designed for my sensei of Statistical Mechanics: Romo Jorquera Mauricio Andres, the Legendary Calligrapher.


接下来我希望实现那种反人类的随机大小唐诗字体. 但是, 很遗憾 CSS 没有真正的随机数 (真正的伪随机数, 确信), deepseek 给出的解决方式是利用预设的 20 个大小进行循环.

但当然, 这不能让我满意.

因此, 这个计划再拖一拖().


下班!