當我們想要在 HTML 網頁上展示滾動的字體，最簡單的方法是通過使用 JavaScript 添加一個自動滾動的代碼。下面是一個簡單的 HTML 字體自動滾動代碼：
<!DOCTYPE html>
<html>
<head>
<style>
#scrolling_text {
position: relative;
height: 30px;
overflow: hidden;
background-color: #f2f2f2;
padding: 10px;
}
#scrolling_text p {
position: absolute;
width: 100%;
height: 100%;
margin: 0;
line-height: 30px;
text-align: center;
font-size: 20px;
color: #333;
animation: scrolling_text 10s linear infinite;
}
@keyframes scrolling_text {
0% {
top: 0;
}
100% {
top: -100%;
}
}
</style>
</head>
<body>
<div id="scrolling_text">
<p>這是一個自動滾動的字體效果！</p>
</div>
</body>
</html>以上代碼包括一個外部的 CSS 樣式表和一個內聯的 JavaScript 動畫。我們通過創建一個 DIV 容器，將一個 P 元素嵌套在其中，然后通過樣式表設置容器的高度、背景顏色和內邊距等樣式。在 P 元素中，我們使用絕對定位將其置于容器的頂部，并且使用動畫屬性設置其自動滾動效果。在這個例子中，我們使用 10 秒鐘的時間以線性方式完成滾動動畫，令其無限循環。
如果您想在您的網頁上使用以上的代碼，只需將其復制到您的 HTML 文件中即可。您還可以通過優化樣式表、改變字體大小和顏色以及調整動畫延遲時間等方式來個性化定制您的滾動字體效果。