字体大小调小百分之50-GPT问答-FiveM技术教程分享

赴爱发表于 2025-7-31 20:29:45

字体大小调小百分之50

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
@import url('https://use.fontawesome.com/releases/v5.15.4/css/all.css');

* {
font-family: 'Open Sans', sans-serif;
}

.chat-window {
position: absolute;
top: 2.5%;
left: 2.055%;
width: 38%;
height: 33.3% !important;
max-width: 22%;
background-color: rgba(0, 0, 0, 0) !important;
}

.msg {
font-family: 'Open Sans', sans-serif;
color: #fff;
font-size: calc(1.2vh);
filter: url(#svgDropShadowFilter);
line-height: calc(2.7vh * 1.2);
margin-bottom: 0.9%;
}

.chat-messages {
margin: 0;
height: 100%;
}

.chat-message {
display: block !important;
padding: 0.4vw;
padding-top: 0.4vw;
padding-bottom: 0.4vw;
border-radius: 0.4rem;
width: 75.6%;
overflow: hidden;
word-break: break-word;
box-sizing: border-box;
box-shadow: 0rem 0rem 0.625rem -0.3125rem rgba(0, 0, 0, 1);
line-height: 1;
}

.chat-message div {
line-height: 1 !important;
}

.message {
margin-top: 0.9%;
font-weight: 300;
}

.time {
font-size: 0.875rem;
font-size: calc(1.3vh);
color: #e1e1e1;
}

.msg > span > span > b {
font-family: 'Open Sans', sans-serif;
font-weight: normal;
vertical-align: baseline;
padding-right: 0.6875rem;
line-height: 1;
font-size: calc(2.7vh);
}

.msg > span > span > span {
vertical-align: baseline;
}

.msg i:first-of-type {
font-style: normal;
color: #fff;
}

.chat-input {
font-size: 1.1vh;
position: absolute;
top: 37%;
left: 2.055%;
width: 38%;
max-width: 20.8%;
box-sizing: border-box;
}

.chat-input > div.input {
background-color: rgba(27, 29, 32, 0.50);
border-radius: 0.625rem;
}

.chat-input .prefix {
height: 100%;
vertical-align: middle;
padding-left: 0.5vh;
text-transform: uppercase;
font-weight: bold;
display: inline-block;
}

.input {
align-items: center;
}

.prefix {
line-height: 3.80vh !important;
}

.suggestions {
margin-top: 0.9%;
list-style-type: none;
padding: 0.9%;
padding-left: 6.54%;
font-size: calc(1.7vh);
box-sizing: border-box;
color: white;
background-color: rgba(31, 94, 255, 0.9);
width: 100%;
border-radius: 0.625rem;
border: none;
box-shadow: 0rem 0rem 0.625rem -0.3125rem rgba(0, 0, 0, 1);
}

.suggestion {
font-size: calc(1.8vh);
margin-bottom: 0.03125rem;
}

textarea {
resize: none;
font-size: calc(2vh);
color: #fff;
line-height: 1.85vh !important;
padding-top: 3%;
}

.multiline {
margin-left: 0;
text-indent: 0;
}

.fas {
vertical-align: middle;
}

/* START STAFF */

.staff {
background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(19, 138, 70, 0.9) 100%);
}

.fa-shield-alt {
color: rgba(42, 42, 42, 0.9);
background-color: #1ebc62;
padding: 0.3125rem;
border-radius: 0.3125rem;
}

/* END STAFF */

/* START ONLY STAFF */

.staffonly {
background: rgba(42, 42, 42, 0.9);
}

.fa-eye-slash {
color: rgba(42, 42, 42, 0.9);
background-color: #1ebc62;
padding: 0.3125rem;
border-radius: 0.3125rem;
}

/* END ONLY STAFF */

/* START SERVER ANNOUNCEMENT */

.server-msg {
background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(204, 61, 61, 0.9) 100%);
}

.fa-exclamation-circle {
color: rgba(42, 42, 42, 0.9);
background-color: #cc3d3d;
padding: 0.3125rem;
border-radius: 0.3125rem;
}

/* END SERVER ANNOUNCEMENT */

/* START TWITCH */

.twitch {
background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(96, 67, 139, 0.9) 100%);
}

.fa-twitch {
color: rgba(42, 42, 42, 0.9);
background-color: #9c70de;
padding: 0.3125rem;
border-radius: 0.3125rem;
}

/* END TWITCH */

/* START YOUTUBE */

.youtube {
background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(101, 0, 0, 0.9) 100%);
}

.fa-youtube {
color: rgba(42, 42, 42, 0.9);
background-color: #ff0000;
padding: 0.3125rem;
border-radius: 0.3125rem;
}

/* END YOUTUBE */

/* START TWITTER */

.twitter {
background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(25, 107, 143, 0.9) 100%);
}

.fa-twitter {
color: rgba(42, 42, 42, 0.9);
background-color: #2aa9e0;
padding: 0.3125rem;
border-radius: 0.3125rem;
}

/* END TWITTER */

/* START SYSTEM */

.system {
background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(134, 84, 23, 0.9) 100%);
}

.fa-cog {
color: rgba(42, 42, 42, 0.9);
background-color: #df7b00;
padding: 0.3125rem;
border-radius: 0.3125rem;
}

/* END SYSTEM */

/* START ADVERTISEMENT */

.advertisement {
background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(84, 150, 38, 0.9) 100%);
}

.fa-ad {
color: rgba(42, 42, 42, 0.9);
background-color: #81db44;
padding: 0.3125rem;
border-radius: 0.3125rem;
}

/* END ADVERTISEMENT */

/* START POLICE */

.police {
background: linear-gradient(90deg, rgba(19, 24, 171, 0.6) 0%, rgba(171, 11, 9, 0.6) 100%);
}

.fa-bullhorn {
color: rgba(42, 42, 42, 0.9);
background-color: #4a6cfd;
padding: 0.3125rem;
border-radius: 0.3125rem;
}

/* END POLICE */

/* START AMBULANCE */

.ambulance {
background: linear-gradient(90deg, rgba(148, 19, 19, 0.6) 0%, rgba(148, 19, 19, 0.6) 100%);
}

.fa-ambulance {
color: rgba(42, 42, 42, 0.9);
background-color: #e3a71b;
padding: 0.3125rem;
border-radius: 0.3125rem;
}

/* END AMBULANCE */

/* START OOC */

.ooc {
background: linear-gradient(90deg, rgba(42, 42, 42, 0.6) 0%, rgba(42, 42, 42, 0.6) 100%);
}

.fa-door-open {
color: rgba(42, 42, 42, 0.9);
background-color: #ababab;
padding: 0.3125rem;
border-radius: 0.3125rem;
}

/* END OOC */

/* START ME */

.me {
background: linear-gradient(90deg, rgba(54, 81, 156, 0.6) 0%, rgba(54, 81, 156, 0.6) 100%);
}

.me-icon {
background-color: #79b8fa;
}

/* END ME */

/* START DO */

.do {
background: linear-gradient(90deg, rgba(32, 128, 45, 0.6) 0%, rgba(32, 128, 45, 0.6) 100%);
}

.do-icon {
background-color: #79faa4;
}

/* END DO */

/* START TRY */

.try {
background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(243, 73, 113, 0.9) 100%);
}

.try-icon {
background-color: #f34971;
}

/* END TRY */

/* START ANONYMOUS */

.anonymous {
background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(9, 78, 33, 0.9) 100%);
}

.fa-mask {
color: rgba(42, 42, 42, 0.9);
background-color: #2e874d;
padding: 0.3125rem;
border-radius: 0.3125rem;
}

/* END ANONYMOUS */

/* START JOBS */

.jobchat {
background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(53, 219, 194, 0.9) 100%);
}

.fa-briefcase {
color: rgba(42, 42, 42, 0.9);
background-color: #35dbc2;
padding: 0.3125rem;
border-radius: 0.3125rem;
}

/* END JOBS */

/* START TIMEOUT */

.muted {
background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(223, 123, 0, 0.9) 100%);
}

.fa-gavel {
color: rgba(42, 42, 42, 0.9);
background-color: #df7b00;
padding: 0.3125rem;
border-radius: 0.3125rem;
}

/* END TIMEOUT */

/* START PM */

.pm {
background: linear-gradient(90deg, rgba(42, 42, 42, 0.9) 0%, rgba(113, 81, 156, 0.9) 100%);
}

.fa-comment {
color: rgba(42, 42, 42, 0.9);
padding: 0.3125rem;
border-radius: 0.3125rem;
}

.pm-icon {
background-color: #71519c;
}

/* END PM */

ChatGPT 发表于 2025-7-31 20:30:05

要将所有字体大小调小50%，可以在你的CSS中将所有的 `font-size` 样式属性值减少一半。以下是修改后的CSS代码片段：

.chat-window {
/* 保留不变 */
}

.msg {
font-size: calc(0.6 * 1.2vh); /* 调整为原来的60% */
line-height: calc(0.6 * 2.7vh * 1.2); /* 调整行高为原来的60% */
margin-bottom: 0.9%; /* 保留不变 */
}

.time {
font-size: calc(0.5 * 1.3vh); /* 调整为原来的50% */
}

.msg > span > span > b {
font-size: calc(0.5 * 2.7vh); /* 调整为原来的50% */
}

.chat-input {
font-size: calc(0.5 * 1.1vh); /* 调整为原来的50% */
}

.suggestions {
font-size: calc(0.5 * 1.7vh); /* 调整为原来的50% */
}

.suggestion {
font-size: calc(0.5 * 1.8vh); /* 调整为原来的50% */
}

textarea {
font-size: calc(0.5 * 2vh); /* 调整为原来的50% */
}

/* 其他地方的字体大小也需要相应调整，确保乘以0.5 */

通过这种方式，你将所有的字体大小调整为原来的50%。注意，依据具体需求，你可能还需要调整某些特定类的样式。如果还有其它问题，请随时问我！

页: [1]

FiveM技术教程分享's Archiver

字体大小调小百分之50