CSS中几种中文字体的英文写法.

最新推荐文章于 2024-10-02 12:26:30 发布
原创 最新推荐文章于 2024-10-02 12:26:30 发布 · 3.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css #microsoft #apple #前端开发 #微软 #office

本文探讨了在网页前端开发中遇到的中文字体无法正常显示的问题，并提供了MacOS和Windows系统下中文字体的英文写法解决方案。
        网页前端开发制作中经常我们需要用一些像微软雅黑，宋体等中文字体的情况，一般我们直接使用font-family:"微软雅黑"这样的写法，;以前还真没发现这有什么问题，直到今天折磨一上午抓狂终于发现了这个问题。百度了一下，明白了一些英文系统或者MAC中直接在CSS中使用中文可能会无法读取鄙视，所以收藏一些CSS中几种中文字体的英文写法微笑，以后就会避免这种问题~

Mac OS的一些：

华文细黑：STHeiti Light [STXihei]

华文黑体：STHeiti
华文楷体：STKaiti
华文宋体：STSong
华文仿宋：STFangsong
俪黑 Pro：LiHei Pro Medium
俪宋 Pro：LiSong Pro Light
标楷体：BiauKai
苹果俪中黑：Apple LiGothic Medium

苹果俪细宋：Apple LiSung Light


Windows的一些：


新细明体：PMingLiU
细明体：MingLiU
标楷体：DFKai-SB
黑体：SimHei
宋体：SimSun
新宋体：NSimSun
仿宋：FangSong
楷体：KaiTi
仿宋_GB2312：FangSong_GB2312
楷体_GB2312：KaiTi_GB2312
微软正黑体：Microsoft JhengHei
微软雅黑体：Microsoft YaHei


装Office会生出来的一些：


隶书：LiSu
幼圆：YouYuan
华文细黑：STXihei
华文楷体：STKaiti
华文宋体：STSong
华文中宋：STZhongsong
华文仿宋：STFangsong
方正舒体：FZShuTi
方正姚体：FZYaoti
华文彩云：STCaiyun
华文琥珀：STHupo
华文隶书：STLiti
华文行楷：STXingkai
华文新魏：STXinwei

HTML CSS的中英文对照
baiganglang58423的博客
09-03 744
python 大蟒蛇downloads 下载install 安装customize 自定义path 环境变量：路径optional 可选的feature 特性特点documentation 文档 docassociate 关联shortcuts 快捷方式setup 安装successful 成功library 库scripts 脚本print 打印hello...
CSS设置字体样式
lh11223326的博客
04-06 1万+
在网页中字体是重要的组成部分，使用好字体可以让网页更加美观，在CSS中提供了一系列用来设置文本样式的属性，如更改字体，控制字体大小和粗细等等。如下：：用来设置字体的。font-style：用来设置字体风格，比如斜体。：用来设置字体粗细。font-size：用来设置字体尺寸。：可以将小写字母转换为小型大写字母。：对字体进行伸缩变形(使用较小，并且主流的浏览器都不支持，就不做讲解了)。font：字体所有属性的缩写，可以在一个声明里面设置多个字体属性。CSS设置网页颜色-优快云博客。
纯Css比较好看的中英文字体样式（持续整理版）
程序猿开发日志【学习永无止境】
08-15 2万+
刚好公司要用到，需要纯css的，不用任何插件就可以显示很不错的字体 样式一： <style type="text/css"> .tb-js-yf-style{font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;} </style> 样式一： <div class="tb-js-yf-style...
CSS字体样式（font）[详细]
这个人好有趣....hh
02-22 3万+
font-family：设置字体； font-style：设置字体的风格，例如倾斜、斜体等； font-weight：设置字体粗细； font-size：设置字体尺寸； font-variant：将小写字母转换为小型大写字母； font-stretch：对字体进行伸缩变形（使用较少，并且主流浏览器都不支持）； font：字体属性的缩写，可以在一个声明中设置多个字体属性。
CSS文本样式（一）
qq_72013756的博客
08-21 7338
从零开始学前端
css字体几种写法
12-08
### CSS字体几种写法详解 在CSS中定义字体的方式多种多样，不同的浏览器对字体的支持程度也不尽相同。本文将详细介绍几种常见的中文字体定义方法及其兼容性问题。 #### 使用中文名称定义字体 最常见的方法是直接...
css中的一些兼容问题.pdf
07-08
在解决CSS兼容性问题时，可以通过以下几种方法： 1. CSShack技术：这是一种使用特定的符号来区分不同浏览器的写法。例如，IE6识别特定的CSS属性时会忽略「\9」后的代码，而IE7和IE8则会忽略「*」之后的代码，同时IE...
CSS中的几个伪元素使用介绍
09-25
今天我们将探讨几个常见的CSS伪元素，以及如何在实际项目中应用它们。 首先，我们要了解两个主要的伪元素：`::before`和`::after`。这两个伪元素分别允许我们在元素内容之前或之后插入内容。通过设置`content`属性...
CSS代码属性分组的写法例子
12-10
在CSS（层叠样式表）编码中，属性分组是一种优化和提高代码可读性的技巧。它涉及到将具有相似功能或关联的样式属性组织在一起，以便于管理和维护。标题和描述中提到的“CSS代码属性分组的写法例子”正是关于如何有效...
CSS常用字体样式
是个非常热爱生活、乐观、奋斗、努力的逗比青年
05-20 7025
总结：这7种css字体样式，就是我们比较常用的啦，当然还有很多字体样式，这里就不一一罗列出来了！
CSS字体样式属性及文本外观属性
CruelMeng的博客
03-18 2960
font-family:字体名称;src:字体路径;
CSS font-family 各字体一览表
吃不胖的程序猿历程
08-04 2万+
windows常见内置中文字体 字体中文名 字体英文名宋体                      SimSun（浏览器默认）黑体                      SimHei微软雅黑               Microsoft Yahei微软正黑体            Microsoft JhengHei楷体              ...
css样式（字体样式/文本样式/超链接伪类/列表样式/背景样式
2401_84692568的博客
08-10 844
1、font-family字体的类型(一般不设置，默认为微软雅黑)2、font-size 设置字体的大小3、 font-style 设置字体的类型 （ 一般常用的有两个 normal 正常 和 italic 倾斜）4、font-weight 设置字体的粗细 （ bold 加粗 数字用700表示）简写方式font 字体风格 字体粗细 字体大小 字体类型(其中风格，粗细可以省略)一般都是设置字体大小。
02-CSS样式（文本，背景，边框样式，line-height和vertical-align的区别）
qq_41067077的博客
03-22 2167
文字文本样式，背景，边框样式，line-height和vertical-align的区别。。。。。。
css设置文本样式属性(5个案例+代码实现+效果图)
请输入博客简介
10-02 3085
（有案例，代码实现，代码均可以复现） font-size设置字体大小，font-family设置字体的展现形式，font-weight设置字体的粗细,font-style设置字体风格，@font-face自定义字体
CSS基础之字体样式
沃和莱特的博客
04-24 4225
CSS基础之字体样式
css的中英文对齐
sina_panda
08-26 5938
CSS中文英文文字两端对齐 让网页更好看 在制作网页时，把网页排版布局全部做好后，发布内容时，却发现不论是中文、英文文字两端对齐不理想，两边不整齐，让整个网页看起来不怎么好看。 妙用CSS代码，把文字两端对齐是很EASY的。CSS有两个属性是针对文字两端对齐的，我们只要把它放在需要文字两端对齐的CSS类或id里就可以了。 CSS中文英文文字两端对齐使用实例：
【CSS】关于CSS的常用字体文本样式
一文不值的博客
10-16 1099
关于CSS的常用字体文本样式
CSS强制英文、中文换行与不换行 强制英文换行
热门推荐
pan_junbiao的博客
04-01 7万+
1. word-break:break-all;只对英文起作用，以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用，以单词作为换行依据 3. white-space:pre-wrap; 只对中文起作用，强制换行 4. white-space:nowrap; 强制不换行，都起作用 5. white-space:nowrap; overflow:hidden; te...
js获取css属性值的几种方法
最新发布
04-18
<think>好的，我现在需要回答用户关于JavaScript中获取CSS属性值的方法的问题。首先，用户之前问了关于CSS的overflow:auto触发滚动条的条件，现在转向JavaScript获取CSS属性，这可能是因为他们想动态检测元素样式，比如判断是否需要滚动条。 用户提供的引用提到了三种方法，但引用内容有点模糊。比如引用[1]提到使用JavaScript获取和设置CSS属性的三种方法，并举了backgroundImage和fontWeight的例子，这说明可能需要处理属性名的转换，比如CSS中的连字符转换为驼峰式。引用[2]提到在style标签中写CSS，这可能涉及内联样式和计算样式的区别。 我需要回忆常见的JavaScript获取CSS属性的方法。通常有三种：element.style.property、getComputedStyle()和currentStyle（针对旧版IE）。另外，用户可能想了解如何获取内联样式和计算样式，以及需要注意的地方，比如属性名转换、只读性、浏览器兼容性等。 用户可能在实际开发中需要动态获取样式，比如在响应式设计中调整布局，或者检测元素是否溢出。结合之前关于overflow的问题，可能用户想用JavaScript检测子元素高度是否超过父元素，从而触发滚动，这就需要获取元素的高度等属性。 需要注意，element.style只能获取内联样式，而计算样式需要用getComputedStyle。还要提到不同浏览器的兼容性问题，比如旧版IE的currentStyle。此外，属性名的转换规则，比如background-image变成backgroundImage。 另外，用户可能对如何应用这些方法有疑问，比如如何正确使用getComputedStyle，是否需要处理单位（如px），或者如何获取伪元素的样式。这些可以作为扩展点，但当前问题主要聚焦在获取方法本身。 需要结构化回答，分点说明每种方法，给出示例代码，并指出注意事项。同时，根据用户之前的回答，他们喜欢示例代码和注意事项，所以应该包括这些部分。最后，生成相关问题，可能涉及样式设置、性能优化或特定场景的应用。 确保回答使用中文，行内公式正确（虽然这个问题可能用不上数学公式，但如果有涉及数值的地方需注意），独立公式用$$...$$，但此处可能不需要。检查LaTeX语法，不过这里可能用不上。引用之前的回答中的引用标识，比如用户之前提到了引用[^1]和[^4]，但当前问题中的引用是用户提供的站内引用[^1]和[^2]，需要正确对应。</think>在JavaScript中获取CSS属性值主要有三种核心方法，具体使用场景和注意事项如下： --- ### 一、通过`element.style`获取内联样式 **特点**：仅能获取通过`style`属性直接设置的**内联样式** ```javascript const div = document.querySelector('div'); // 设置样式 div.style.color = 'red'; // 获取样式（需使用驼峰命名） console.log(style.color); // 输出: "red" ``` **注意事项**： 1. 属性名需转换为驼峰格式（如`font-size` → `fontSize`）[^1] 2. 无法获取外部样式表或`<style>`标签中定义的样式 --- ### 二、通过`getComputedStyle()`获取计算样式 **特点**：获取元素最终生效的**所有样式**（包括继承样式和浏览器默认值） ```javascript const div = document.querySelector('div'); const styles = window.getComputedStyle(div); // 获取实际渲染的字体大小（包含单位） console.log(styles.fontSize); // 输出: "16px" ``` **关键参数**： - 第一个参数：目标元素 - 第二个参数（可选）：伪元素（如`::before`） **注意事项**： 1. 返回值为只读，不可直接修改 2. 数值类属性（如`width`）会带单位（如`px`）[^1] --- ### 三、兼容旧版IE的`currentStyle`属性 **语法**：`element.currentStyle.propertyName` ```javascript // 兼容性写法 const fontSize = div.currentStyle ? div.currentStyle.fontSize : getComputedStyle(div).fontSize; ``` --- ### 方法对比表 | 方法 | 来源 | 可读性 | 可写性 | 浏览器支持 | |--------------------|--------------------|--------|--------|-----------------| | `element.style` | 内联样式 | ✔️ | ✔️ | 所有 | | `getComputedStyle` | 计算样式 | ✔️ | ✖️ | 现代浏览器 | | `currentStyle` | 计算样式（IE特有） | ✔️ | ✖️ | IE6-IE11 | --- ### 应用示例：检测元素高度是否溢出 结合用户之前关于`overflow: auto`的问题，可通过以下代码判断： ```javascript const parent = document.querySelector('.parent'); const child = document.querySelector('.child'); // 获取父元素高度（需解析单位） const parentHeight = parseFloat(getComputedStyle(parent).height); // 获取子元素总高度（包含padding、border） const childHeight = child.offsetHeight; if (childHeight > parentHeight) { parent.style.overflow = 'auto'; // 动态添加滚动条 } ``` ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值