document/TranslateProject
2
0
Fork 0
mirror of https://github.com/LCTT/TranslateProject.git synced 2026-08-23 04:03:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

PUB:20141114 How To Use Emoji Anywhere With Twitter's Open Source Library

Browse Source 
@FSSlc
This commit is contained in:
wxy
2015-02-28 20:55:19 +08:00
parent 11da060bd0
commit 0d52296a88
1 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
translated/tech/20141114 How To Use Emoji Anywhere With Twitter's Open Source Library.md → published/20141114 How To Use Emoji Anywhere With Twitter's Open Source Library.md
View File

@@ -1,36 +1,36 @@
怎样通过 Twitter 的开源库来随处使用 Emoji 表情符号
怎样通过 Twitter 的开源库来随处使用 Emoji 表情符号
================================================================================
> 通过 GitHub 将它们嵌入到网页和其他项目中。
![](http://a3.files.readwrite.com/image/upload/c_fit,w_620/MTI1OTA2OTIyNTI3MjcxNTU1.png)
Emoji, 来自日本的小巧符号，通过图像表达感情，已经征服了手机文字信息的世界。
Emoji, 来自日本的小巧符号，通过图像表达感情，已经征服了移动互联网的信息世界。
现在，你可以在虚拟世界中随处使用它们了。 Twitter 最近[开源了][1]他们的 emoji 符号库，使得你可以在你自己的网站，应用，和项目中使用它们。
但这需要一点体力活。 Unicode 已经识别甚至标准化了 emoji 字母表， 然而 emoji 仍然[不能完全与所有的网络浏览器相兼容][2],这意味着大多数情况下，它们将呈现为 “豆腐块”或 空白盒子。当 Twitter 想使得 emoji 可用时，社交网络联合一家名为[Icon Factory][3]的公司共同渲染浏览器以模仿 文本信息符号的效果。结果，Twiter 说道 人们对他们的 emoji 库有很大的需求。
但这需要一点体力活。 Unicode 已经识别甚至标准化了 emoji 字母表， 然而 emoji 仍然[不能完全与所有的网络浏览器相兼容][2]，这意味着大多数情况下，它们将呈现为 “豆腐块”或“空白盒子”。当 Twitter 想使得 emoji 到处可用时，这家社交网络联合了一家名为[Icon Factory][3]的公司来渲染浏览器以模仿文本信息符号的效果。Twiter 认为人们对他们的 emoji 库有很大的需求。
现在， 你可以从 [GitHub][4] 上克隆 Twitter 的整个库，从而在你的开发项目中使用它们。 下面将为你介绍如何达到上面的目的以及如何使得 emoji 更容易被使用。
### 为 Emoji 得到 Unicode 支持 ###
Unicode 是国际编码标准，它为任意的符号，字母或人们想在网络上使用的数字配置了一串符号。换句话说，它是 你如何在计算机上阅读文本 与 计算机如何读取文本 之间的缺失环节。例如，对于你正看到的位于这些句子中的`空白`，计算机读取为 “&mbsp”。
Unicode 是国际编码标准，它为任意的符号、字母或人们想在网络上使用的数字配置了一串编码。换句话说，它是你如何在计算机上阅读文本与计算机如何读取文本之间的缺失环节。例如，对于你正看到的位于这些句子中的`空格`（LCTT 译注：英文分词中间的空格），计算机读取为 “&nbsp”。
Unicode 甚至拥有其自己的 [原始 emoji][5]，它们可以 在没有你的任何努力的情况下在浏览器中被阅读。例如，当你看到了 一个 ❤ 符号，你的计算机正在解码字符串 “2665” 。
Unicode 甚至拥有其自己的[原始 emoji][5]，它们可以在没有你的任何努力的情况下在浏览器中被阅读。例如，当你看到了 一个 ❤ 符号，你的计算机正在解码字符串 “2665” 。
要在大多数情况下使用 Twitter 的 emoji 库，你只需在你的 HTML 网页中的 `<head>`块中添加如下脚本：
<script src="//twemoji.maxcdn.com/twemoji.min.js"></script>
这样就使得你的项目可以访问 包含有已经在 Twitter 中可使用的数以百计的 Emoji 符号的 JavaScript 库。然而，创建一个仅仅包含这个脚本的文档并不能使得在你的网站中呈现出 emoji 符号，实际上，你仍需要嵌入一些 emoji 符号！
这样就使得你的项目可以访问包含有已经在 Twitter 中可使用的数以百计的 Emoji 符号的 JavaScript 库。然而，创建一个仅仅包含这个脚本的文档并不能使得在你的网站中呈现出 emoji 符号，实际上，你仍需要嵌入这些 emoji 符号！
在 `<body>`块中，粘贴一些可以在 Twitter 的[preview.html 文件源代码][6] 中找到的 emoji 字符串。我使用了 &#x1F3B9; 和 &#x1F3C1，当然我并不知道在浏览器窗口中它们的样子。是的，你必须粘贴并猜测它们。你已经看出了问题，我们将在 第二小节中予以解决。
在 `<body>`块中，粘贴一些可以在 Twitter 的[preview.html 文件源代码][6] 中找到的 emoji 字符串。我使用了 &#x1F3B9; 和 &#x1F3C1，当然我并不知道在浏览器窗口中它们的样子。是的，你必须粘贴并猜测它们。你已经看出了问题，我们将在第二小节中予以解决。
无论如何，通过一些尝试，你可以将一个如下图的原始 HTML 文件---
![](http://a4.files.readwrite.com/image/upload/c_fit,w_620/MTI1OTA2ODQyNTMzNTQ1OTk0.png)
---转变成如下图的网页：
---显示为如下图的网页：
![](http://a1.files.readwrite.com/image/upload/c_fit,w_620/MTI1OTA2ODExNjYzNDU1NTA2.png)
@@ -52,11 +52,11 @@ Unicode 甚至拥有其自己的 [原始 emoji][5]，它们可以 在没有你
<link rel="stylesheet" href="twemoji-awesome.css">
一旦你将上面的代码添加了进去，你便可以删除先前添加的 Twitter 的脚本链接。
一旦你将上面的代码添加了进去，你便可以删除先前添加的 Twitter 的脚本链接。
现在，找到 `body` 块部分的代码，然后添加一些 emoji 符号。我使用了 `<i class="twa twa-sparkling-heart"></i>`, `<i class="twa twa-exclamation"></i>`, `<i class="twa twa-lg twa-sparkles"></i>` 和 `<i class="twa twa-beer"></i>`。
现在，找到 `body` 块部分的代码，然后添加一些 emoji 符号。我使用了 `<i class="twa twa-sparkling-heart"></i>`, `<i class="twa twa-exclamation"></i>`, `<i class="twa twa-lg twa-sparkles"></i>` 和 `<i class="twa twa-beer"></i>`。
最终，你将得到如下的代码：
最终，你将得到如下的代码：
![](http://a2.files.readwrite.com/image/upload/c_fit,w_620/MTI1OTA2ODcyMDYxNDU2MzU0.png)
@@ -64,9 +64,9 @@ Unicode 甚至拥有其自己的 [原始 emoji][5]，它们可以 在没有你
![](http://a1.files.readwrite.com/image/upload/c_fit,w_620/MTI1OTA2ODExOTMxODkwOTYy.png)
当当！这样你不仅得到了一个可以在浏览器中支持 emoji 符号的基本网页，而且还知道了如何简单地实现它。你可以随意的在[我的 GitHub][9] 中查看这个教程，并且可以克隆这些实际的文件而不只是看看这些截图。
Duang！这样你不仅得到了一个可以在浏览器中支持 emoji 符号的基本网页，而且还知道了如何简单地实现它。你可以随意的在[我的 GitHub][9] 中查看这个教程，并且可以克隆这些实际的文件而不只是看看这些截图。
来自于[得到 Emoji][10]的引导图像； Lauren Orsini 截图。
题图来自于[得到 Emoji][10]； Lauren Orsini 截图。
--------------------------------------------------------------------------------
@@ -74,7 +74,7 @@ via: http://readwrite.com/2014/11/12/how-to-use-emoji-in-the-browser-window
作者：[Lauren Orsini][a]
译者：[FSSlc](https://github.com/FSSlc)
校对：[校对者ID](https://github.com/校对者ID)
校对：[wxy](https://github.com/wxy)
本文由 [LCTT](https://github.com/LCTT/TranslateProject) 原创翻译，[Linux中国](http://linux.cn/) 荣誉推出