photopea-v2/blog.photopea.com/color-fonts-in-photopea.html

82 lines
4.8 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<title> Color Fonts in Photopea</title>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0" />
<link rel="stylesheet" href="https://blog.photopea.com/wp-content/themes/simplex/style.css" type="text/css" media="screen" />
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i" rel="stylesheet">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-4249565-38', 'photopea.com'); ga('send', 'pageview');
</script>
</head>
<body>
<div id="page">
<div id="header">
<a href="https://blog.photopea.com/" class="title">Photopea Blog</a>
<!--<p>Web-based image editor.</p>-->
<a class="curr" href="//blog.photopea.com">Blog</a> |
<a href="//www.photopea.com/learn">Learn</a> |
<a href="//www.photopea.com/tuts">Tutorials</a> |
<a href="//www.photopea.com/templates">Templates</a> |
<a href="//www.photopea.com/api">API</a> |
<a href="//www.facebook.com/photopea"><img src="//photopea.com/img/facebook.svg" /></a> |
<a href="//www.twitter.com/photopeacom"><img src="//photopea.com/img/twitter.svg" /></a>
</div> <div id="main">
<div id="content">
<div class="post" id="post-692">
<span class="date">January 19, 2018</span>
<h1>Color Fonts in Photopea</h1>
<div class="entry">
<p>Starting today, Photopea supports color fonts!</p>
<span id="more-692"></span>
<p>We imagine a font as a set of shapes. The font gives each logical character some graphic representation. Text editors let us choose the color of our text, i.e. set the solid color to one or more characters. The shape of a character may be very complex, but we are still restricted to a single color for the whole character.</p>
<p>The new standard for <b>Color Fonts</b> allows using multiple colors inside one character (more details at <a href="https://www.colorfonts.wtf/" target="_blank">ColorFonts.wtf</a>). There are already many fonts in this format. They can be used in Photoshop, Pixelmator, Sketch and other commercial programs. Starting today, you can load and use such fonts in Photopea. PP is probably the first free editor having this capability.</p>
<p><b style="font-size:1.5em"><a href="https://www.photopea.com?p=%7B%22files%22:%5B%22https://www.photopea.com/api/img2/fnt_preview.psd%22%5D,%22resources%22:%5B%22https://www.photopea.com/api/img2/fnts/Abelone-FREE.otf%22,%22https://www.photopea.com/api/img2/fnts/BungeeColor-Regular_svg.ttf%22,%22https://www.photopea.com/api/img2/fnts/Gilbert-Color%20Bold-Preview_1004.otf%22,%22https://www.photopea.com/api/img2/fnts/NTBixa-Color.otf%22,%22https://www.photopea.com/api/img2/fnts/Playbox-FREE.otf%22%5D,%22environment%22:%7B%7D%7D" target="_blank">Try Color Fonts in Photopea Now!</a></b></p>
<p>All our effort is available to the public in our open-source library <a href="https://github.com/photopea/Typr.js" target="_blank">Typr.js</a>.</p>
<img src="//blog.photopea.com/wp-content/uploads/2018/01/fnt_preview.png" class="fullw" />
</div>
</div>
</div><!--content-->
<div style="width:110px; margin: 0px auto;">
<a href="#" title="Share on Facebook" onclick="smallWindow('http://www.facebook.com/share.php?u=');"><img src="//www.photopea.com/promo/fb.png" /></a>
<a href="#" title="Share on Google Plus" onclick="smallWindow('https://plus.google.com/share?url=');"><img src="//www.photopea.com/promo/gp.png" /></a>
<a href="#" title="Share on Twitter" onclick="smallWindow('http://twitter.com/share?url=');"><img src="//www.photopea.com/promo/tw.png" /></a>
<script type="text/javascript">
function smallWindow(url)
{
var w = 640, h = 300;
window.open(url+"https://blog.photopea.com/color-fonts-in-photopea.html", "Share", "width="+w+",height="+h+",left="+Math.floor((window.innerWidth-w)/2)+",top="+Math.floor((window.innerHeight-h)/2));
}
</script>
</div>
</div>
<div id="disqus_thread"></div>
<script type="text/javascript">
var disqus_shortname = 'photopeablog'; // required: replace example with your forum shortname
(function() { var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq); })();
</script>
<!--main-->
<?//php get_sidebar(); ?>
<div id="footer">&copy; 2013-2021 support@photopea.com</div>
</div> <!--page-->
</body>
</html>