用途:这是 design-it 技能下的子风格参考,用于在用户明确需要粗野主义排版——超大字体、原始未修饰呈现、激进布局时提供 Web 与 App 实现指南。资料说明它不应被直接触发。
主要能力与视觉原则:规则破坏,文字重叠、无视页边距或故意溢出屏幕边缘;反设计,故意使用系统字体或“丑”字体(Times New Roman、Courier)并放至极大尺寸;强烈对比,使用冲突色或极端单色。视觉特征包括工业风黑白红或激进的霓虹撞色,系统默认字体放大到 150px,跑马灯、闪烁文字、穿过下伸部的下划线等。
使用方式(Web):打破网格,使用绝对定位或负外边距。资料给出 CSS 示例,设定 body 为白底黑字 Times New Roman,.brutalist-headline 使用 font-size: 15vw、line-height: 0.7、letter-spacing: -5px、margin-left: -10px 与 word-wrap: break-word;.brutalist-highlight 用红底白字;.marquee-container 用 Courier New、上下黑色粗边框、overflow hidden 与 nowrap;.brutalist-link 为蓝字大写下划线,悬停反色。
使用方式(App):SwiftUI 中 .ignoresSafeArea() 为必须,文字需能切入刘海与状态栏;用 VStack 负间距或负 offset 强制重叠;轮廓字通过 .foregroundColor(.clear) 叠加 .stroke() 实现。Flutter 中不使用 SafeArea,用 Stack 与 Positioned 绝对定位,TextStyle 的 height 设 0.8 或更低压紧行距。React Native 无原生 text-stroke,可用 textShadow 模拟或用 @shopify/react-native-skia 实现真实描边,用负 marginTop/marginLeft 制造布局混乱,注意 Android 上的文字裁剪与父视图 overflow。Jetpack Compose 用 Box 加 Modifier.offset 自由重叠,TextStyle 支持 drawStyle = Stroke(width = 5f) 方便做描边字。
限制:这是样式参考,不替代具体环境的验证、无障碍测试或专家评审;需另行确认对比度与响应式行为。资料未提供收费、价格、平台或效果等信息。