纯Css比较好看的中英文字体样式（持续整理版）

最新推荐文章于 2025-04-22 14:46:31 发布

Joker_Ye

最新推荐文章于 2025-04-22 14:46:31 发布

阅读量2.2w

点赞数 4

文章标签：纯css font-family好看样式中英文样式整理页面字体设置

本文链接：https://blog.csdn.net/hj7jay/article/details/99643588

版权

本文介绍了几种使用纯CSS实现的字体样式技巧，无需依赖任何插件，即可达到美观的效果。包括不同字体家族、字号、行高及斜体效果的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

刚好公司要用到，需要纯css的，不用任何插件就可以显示很不错的字体

样式一：

<style type="text/css">
.tb-js-yf-style{font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;}
</style>

样式一：
<div class="tb-js-yf-style">京缘</div>
<div class="tb-js-yf-style">JY</div>

样式二：

<style type="text/css">
.tb-js-yf-style2{font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;}
</style>

样式二：
<div class="tb-js-yf-style2">京缘</div>
<div class="tb-js-yf-style2">JY</div>

样式三：

<style type="text/css">
.jia-style{font: 14px/1.5 'Microsoft YaHei',arial,tahoma,\5b8b\4f53,sans-serif;}
</style>

样式三：
<div class="jia-style">京缘</div>
<div class="jia-style">JY</div>

样式四：

<style type="text/css">
.ued-style{font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;}
</style>

样式四：
<div class="ued-style">京缘</div>
<div class="ued-style">JY</div>

样式五：

<style type="text/css">
.ux-style{font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;}
</style>

样式五：
<div class="ux-style">京缘</div>
<div class="ux-style">JY</div>

样式六：

<style type="text/css">
.ux-style2{font:12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;}
</style>


样式六：
<div class="ux-style2">京缘</div>
<div class="ux-style2">JY</div>

样式七：(主要是英文比较有特色)

<style type="text/css">
.geo-style{font:Georgia, serif;}
</style>

样式七：
<div class="geo-style">京缘</div>
<div class="geo-style">JY</div>

样式八：(主要是英文比较有特色)

<style type="text/css">
.geo-style2{font:italic 1em Georgia, serif;}
</style>

样式八：
<div class="geo-style2">京缘</div>
<div class="geo-style2">JY</div>