搜索到
2
篇与
的结果
-
【CSS】font-weight设置为500显示不出加粗效果 【CSS】font-weight设置为500显示不出加粗效果问题出在操作系统上：macOS 系统默认的华文黑体(STHeiti) 有七个矢量级别：Heavy/Bold/MediumP4/Regular/Thin/Light/UltraLightP2 ，它包含上面 CSS 中设定的 500 这个精度。Windows 系统默认的宋体(simsun) 没有那么多级别。在缺少级别支持的前提下，CSS 会根据回退机制寻找一个类似的精度，结果就变成了400 (Normal)。回退机制：如果指定的权重值不可用，则使用以下规则来确定实际呈现的权重：如果指定的权重值在 400和 500之间（包括 400和 500）：按升序查找指定值与 500之间的可用权重；如果未找到匹配项，按降序查找小于指定值的可用权重；如果未找到匹配项，按升序查找大于 500的可用权重。如果指定值小于 400，按降序查找小于指定值的可用权重。如果未找到匹配项，按升序查找大于指定值的可用权重（先尽可能的小，再尽可能的大）。如果指定值大于 500，按升序查找大于指定值的可用权重。如果未找到匹配项，按降序查找小于指定值的可用权重（先尽可能的大，再尽可能的小）。以上策略意味着，如果一个字体只有 normal 和 bold 两种粗细值选择，指定粗细值为 100-500 时，实际渲染时将使用 normal，指定粗细值为 501-900 时，实际渲染时将使用 bold 。 -
React中编写css的几种方式 React中编写css的几种方式使用的是原生css样式，在.js文件中引入并使用className(原生css, 缺点是不方便样式隔离，容易造成样式污染)行内样式（缺点：行内样式的通用缺点）CSS Module 例如：index.module.scss index.module.less index.module.csscss-in-jscss-in-js是在js中直接编写css的技术，也是react官方推荐的编写css的方案。CSS Module也具有良好的开发体验，性能也更好。优点：同vue的scpoe可以做到样式隔离的效果代码共享，轻松在 JS 和 CSS 之间共享常量和函数方便CSS单元化测试劣势：增加运行时开销。增加构建后产物体积。使 React DevTools 变得混乱，debug 时可读性变差CSS-in-JS并不是一颗能完美解决样式维护难题的银弹，但是通过借助一定最佳实践后，足以应对大多数前端需求，比如主题切换、组件样式封装、用户端样式覆盖等等，并显著提升前端团队在维护样式时的工作效率，css-in-js方案比较从体积来看：emotion的体积是最小的。从技术生态环境（以及流行程度）：styled-components的star最多，文档相对来讲也是最完善的。从支持的特性来看：emotion、aphrodite、jss支持的特性是最多的。CSS-in-JS Playground是一个可以快速尝试不同CSS-in-JS实现的网站，在线尝试（https://www.cssinjsplayground.com/）
