排版（字母）的某些部分响应窗口的宽度/高度？

我不确定这样的事情是否可以通过CSS实现，但是这个社区中有才华的人再次证明我错了很多次，所以我们开始吧！排版（字母）的某些部分响应窗口的宽度/高度？

我在想，如果有可能的字母Ø，ü的一定水平的部分，ē可以同时保持其位置与窗的宽度与应对呢？在下面的图片中，我已经绘制了响应式印刷如何对窗口比例作出反应。请注意，设置类型放置在一个页面包装中，并垂直放置在窗口的中间。

enter image description here

我怎么可能做到这一点？我应该使用什么样的格式（svg，shapes等）

谢谢你提前！

2014-11-21 kenhimself

这是一个'SVG'和'CSS'的混合体，对此我保证。 – 2014-11-21 22:54:41

嗨@JoshBurgess - 你能提出我该如何实现这个目标？我知道如何制作SVG并将它们转化为点，以便html不必调用SVG，但是您是否知道如何使响应（以蓝色标记）以某种方式与非响应部分文本（标记为绿色？） – kenhimself 2014-11-21 22:57:12

您可以简单地通过在裁剪div中使用叠加的div：扩展字母形状使用SVG创建，右侧浮动并隐藏在左侧div下面。当用户调整窗口大小时，右侧的div滑出显示细长部分。 – 2014-11-22 23:02:59

您可以通过只具有溢出一个div内覆盖元素做简单的伸展字母形状用SVG创建，并隐藏在左侧divs下面。当用户调整窗口大小时，右侧的div滑出显示细长部分。例如。

<div id="clipper"> 
<svg id="leftpart" x="0px" y="0px" width="30px" height="150px"> 
    <rect x="0" y="0" width="30" height="150" fill="red"/> 
</svg> 

<svg id="rightpart" x="0px" y="0px" width="2000px" height="150px"> 

    <rect x="0" y="0" width="2000" height="30" fill="black"/> 
    <rect x="0" y="60" width="2000" height="30" fill="black"/> 
    <rect x="0" y="120" width="2000" height="30" fill="black"/> 
</svg> 
</div> 


#clipper{ 
    position: absolute; 
    top:200px; 
    left:200px; 
    width:40%; 
    overflow: hidden; 

} 

#rightpart { 
    position: relative; 
    z-index:1; 
} 

#leftpart { 
    position: absolute; 
    z-index:2; 

}

来源

2014-11-24 01:54:49

你，@Michael Mullany，是一位flip'n天才。这样一个简单的解决方案 - 我绝对想到这一点。我改变了，并添加了几行代码，并得到**完全**我需要的。非常感谢，你摇滚！我已将您的解决方案标记为答案。 – kenhimself 2014-11-24 02:23:36

以下是基于屏幕宽度缩放SVG元素的示例。这取决于有一种方法来选择你要修改的字符元素（例如，U碗的底部）。在这个例子中，矩形元素具有唯一的ID。

HTML：

<svg version="1.1" 
    baseProfile="full" 
    width="200" height="200" 
    xmlns="http://www.w3.org/2000/svg"> 

    <rect id="foo" height="100" width="100" /> 

</svg>

CSS：隐藏：

#foo { 
    fill: #f00; 
    transform: scaleX(0.5); 
} 

@media only screen and (min-width: 500px) { 
    #foo { 
     transform: scaleX(2); 
    } 
}

http://jsfiddle.net/bangarang/tgcw1fop/

来源

2014-11-22 17:44:44

排版（字母）的某些部分响应窗口的宽度/高度？

回答

相关问题