在线隶书字体封面生成器：竖版排版，样式代码一键获取
<!DOCTYPE html>
<html>
<head>
<title>在线生成带隶书字体的封面图片</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
<style>
@font-face {
font-family: 'LiShu';
src: url('https://fonts.gstatic.com/s/lishu/v11/FPxnL8JYtK2tA6WZc5M.woff2') format('woff2');
}
<pre><code>.container {
max-width: 800px;
margin: 0 auto;
padding: 50px;
text-align: center;
font-family: 'LiShu', cursive;
}
h1 {
font-size: 36px;
margin-bottom: 30px;
writing-mode: vertical-lr;
}
.form {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 50px;
}
input[type='text'] {
padding: 10px;
margin-right: 20px;
font-size: 18px;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
button {
padding: 10px 20px;
font-size: 18px;
background-color: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.result {
display: none;
}
img {
max-width: 100%;
}
</style>
</code></pre>
</head>
<body>
<div class="container">
<h1>生成带隶书的封面图片</h1>
<div class="form">
<input type="text" id="book-title" placeholder="输入书名">
<input type="text" id="author" placeholder="输入作者">
<button id="generate-btn">生成封面</button>
</div>
<div class="result">
<img id="cover-img" src="" alt="封面图片">
</div>
</div>
</body>
</html>
原文地址: http://www.cveoy.top/t/topic/mKqq 著作权归作者所有。请勿转载和采集!