CodeBase / 学习笔记 / 平面设计

纪录：为新的PridMag主题设计子主题

纳伊多

Question 1：Wordpress提示缺失父主题

wordpress提示缺失了父主题，说明当前的wordpress站正在使用子主题。这里说的主题和模板是一个东西。通常出错的原因是，子主题中的模板文件设置不对，子主题中的模板名字，应该是父主题的文件夹的名字，不是父主题的名字。

不管是子主题还是普通的主题，主题的名字（Theme Name）都需要写道 style.css中。子主题中，多了一个模板文件，file: style.css

/*
Theme Name: 主题的名字
Template: 模板的名字是父主题中的文件夹的名字
*/

其中 Theme Name（不区分是否是子主题，反正都要写），Template 是父主题中的文件夹的名字，不是父主题的主题名字。这样做还是很灵活的，因为主题的名字可以用空格，而模板的名字用的是父主题的文件夹的名字。文件夹一般是不用空格的，这样模板的名字就可以使用空格了。

以上内容来自@https://www.liuhaolin.com/wordpress/265.html

Qestion 2：em，rem，px的关系？

在不同站点同为1em的字号但看起来大小却不一样？所有还有必要深入了解em，rem，px三个单位之间的关系。

Px表示“绝对尺寸”（并非真正的绝对），实际上就是css中定义的像素（此像素与设备的物理像素有一定的区别，后续详细说明见文末说明1），利用px设置字体大小及元素宽高等比较稳定和精确。Px的缺点是其不能适应浏览器缩放时产生的变化，因此一般不用于响应式网站。

em表示相对尺寸，其相对于当前对象内文本的font-size（如果当前对象内文本的font-size计量单位也是em，则当前对象内文本的font-size的参考对象为父元素文本font-size）。使用em可以较好的相应设备屏幕尺寸的变化，但是在进行元素设置时都需要知道父元素文本的font-size及当前对象内文本的font-size，如有遗漏可能会导致错误。

rem也表示相对尺寸，其参考对象为根元素<html>的font-size，因此只需要确定这一个font-size。

Question 3：如何给BR标签设置高度？

可以尝试给Br标签添加如下样式：

    content: "A" !important;
    display: block !important;
    margin-bottom: 1em !important;

或者下面的：

br{
    content: '.';
    display: inline-block;
    width: 100%;
    border-bottom: 1px dashed black;
}

@https://stackoverflow.com/questions/899252/can-you-target-br-with-css

Question 4：如何在Css中引入字体？

这个是我一直以来思考的问题，中文字体现在非常多，但是遗憾的是网页排版看起来依然不够美观。我粗略观察对比过内地新闻门户网站和外网中文资讯站的排版设计，我得出的结论是外网中文排版似乎做的比内地的要好。当我们阅读一篇文章时，排版会影响我们的直接观感，这个曾经有人称之为“信噪比”。良好的排版能够让人专注于获取信息，排除不必要的干扰。

1. 最深层兼容：
定义字体 @font-face，并在其他样式文件之前引入。

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

使用字体：

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

2.更实用的方案：
由于 WOFF/WOFF2 格式的字体文件兼容性比较好，且加载起来相对较快，所以实际上我们可以只使用这两个格式：

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

如果使用自己的服务器托管呢？
可以下载字体文件压缩包之后，利用转换工具，比如 Transfonter 生成对应的@font-face 样式文件。再把生成的字体文件和样式文件放到项目中即可。

以上转译自@https://css-tricks.com/snippets/css/using-font-face-in-css/

需要注意的问题是，@font-face不能放在样式表html的样式之前，否则会破坏css文件。

Question 5：探讨中文网页的排版风格和原则

中文网页排版往往有自己特殊的需求，特别是跟古代艺术文化相关的内容，这也是最能体现中文特色的地方。但是自近代以来平面设计跟网页排版皆是源于西方审美，中文排版甚至历经字符输入的难题，于上世纪八十年代攻克后亦有面临字体样式的匮乏。而今的中文字体从数量上来看已经甚为丰富了。

赫蹏，一个解决中文排版的方案@https://github.com/sivan/heti

自历史而来，平面审美其实并没有所谓突如其来的进步，正所谓文无第一，各花入各眼，排版设计应当是以其创新性扁平化地在平面上延展。因此各种文明文化在文字排版上的理念其实时相通和互为关联的，中文排版应当是在这些通用的排版常识上加以优化和提升，在网页排版中更应如此。

在《写给大家看的设计书》中所探讨的几大排版原则，在网页排版中完全适用且应当得到遵循。我们除了可以通过利用中文字体增加中文网页排版的特色外，也可以从点线面的元素上增强汉语的印迹，从汉语书写的工具、纸张、形意上加上一些点缀或未不可，但是终究仍应以适于获取信息为最终目标。

写给大家看的设计书，很早就买了这本书，也许有一天我应该再读一遍

Question 6：我需要一个logo

“也在研究社”大致是我在前两年某次出差回城的路上琢磨出来的。我认为认真的态度十分重要，这个认真更倾向于“较真”，“认真对待”的意思，而非一种“事不关己高高挂起”的冷漠。对所从事的职业认真，对手中的权利义务认真，对周身的生活体验认真，大致于此。

也、在二字，源自王羲之《兰亭集序》首段

“认真”为什么会转变为“也在研究社”？其实是想表明专家学者的研究固然重要，但是每个人都应该审视和感受周身的事务。王阳明有提倡一个内心修炼的概念，清气、浊气、观照之类的(看的比较早，大概也忘了)，我为了对此类修炼进行总结，生造了一个字：照心，上图使用了两种不同的字体，但仍觉不够飘逸，也许以后我自己可以练练书法，把这个字写得更好吧。总之，也在的意思就是不旁观，要参与进来，并尽最大的可能去知觉。

Question 7：